时间戳

首页 > 解决方案 > 如何将文本与标题图像对齐？

html - 如何将文本与标题图像对齐？

问题描述

我在自动回复电子邮件系统中使用了图像标题，如何将文本与图像对齐？

这是它的样子：

文字与图片不对齐

源代码：

<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>

<body>

  <img alt="" src="myImage.png" /><br />

  <p style="font-family: arial;">Dear [Test Text],<br />
    <br /> Today’s Doodle celebrates Jordan’s Independence Day and 74 years of freedom. On this date in 1946, the country now known as the Hashemite Kingdom of Jordan became a sovereign nation. ​ <br /> While that day hasn&#39;t arrived yet, we are committed
    to understanding our employees&#39; perspectives on how COVID-19 has impacted the way we work, and this will help inform how we will move forward together.<br />
    <br /> Illustrated in the Doodle artwork, the flag of Jordan features the traditional pan-Arab colors of crimson, black, green, and white with a seven-pointed star that symbolizes the unity and strength of the Jordanian people.
    <br />
  </p>

</body>

</html>

标签： htmlcssformat

解决方案

这是一种方法：

要真正彻底回答您的问题，我建议学习 CSS 盒子模型，以了解所有元素的行为方式。

  1. 在这里，我制作了一个容器 div 并将其宽度设置为父容器的 90%。您还可以将其设置为固定测量值，例如 500 像素。现在，默认情况下，其中的所有 div 都会拉伸以填充其宽度。

  2. 然后，我在该容器 div 中放置了一个 div。它移动到容器 div 的顶部并自动匹配容器的宽度。它不会自动有任何高度，所以我设置了一个随机高度（您可以调整）。

  3. 然后，我没有使用 img 标签，而是将横幅图像变成了这个 div 的背景图像。（我建议查找 background-size 属性以了解如何调整背景图像的大小）。

  4. 接下来，取出所有<br>标签。它们不是很好的做法，因为它们很老套，并且不能让您很好地访问内容样式。相反，将每个段落放在自己的<p>标签中。

  5. 要将容器 div 在页面上居中，您可以使用样式“margin:auto”。这使得左侧和右侧具有相等的边距。如果您不希望它居中，请将其取出并将“float：left”放入样式中。

  6. 要查看所有 div 标签的作用，请在它们上添加不同颜色的“border:solid Purple 2px”。

<div class="container" style="width:90%;margin:auto;">
  <div alt="" style="background-image:url('https://png.pngtree.com/thumb_back/fh260/back_pic/00/02/44/5056179b42b174f.jpg');height:3rem;border:solid blue 1px;background-size:cover;">the image is the background of this div</div>
  <p style="margin-bottom:1rem">Dear [Test Text],</p>
  <p style="margin-bottom:1rem">
    Today’s Doodle celebrates Jordan’s Independence Day and 74 years of freedom. On this date in 1946, the country now known as the Hashemite Kingdom of Jordan became a sovereign nation.
  </p>
  <p style="margin-bottom:1rem">
    While that day hasn&#39;t arrived yet, we are committed to understanding our employees&#39; perspectives on how COVID-19 has impacted the way we work, and this will help inform how we will move forward together.
  </p>
  <p>
    Illustrated in the Doodle artwork, the flag of Jordan features the traditional pan-Arab colors of crimson, black, green, and white with a seven-pointed star that symbolizes the unity and strength of the Jordanian people.
  </p>
</div>

推荐阅读