如何将我的文本与我的 header 图像对齐？
[英]How Can I Align my texts with my header image?
问题描述
我在自动回复 Email 系统中使用了图像 header，如何将文本与图像对齐？
这是它的样子：
源代码：
<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't arrived yet, we are committed to understanding our employees' 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>
3 个解决方案
解决方案1
1 2020-05-25 01:13:43
你可以把你的<p>放在一个<div>中，并给它一个像这样的内联样式：
<div style="width:500px;">
<p style="font-family: arial;">
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 Jord
</p>
</div>
解决方案2
1 2020-05-25 04:41:54
这是一种方法：
要真正彻底回答您的问题，我建议了解 CSS 框 model，以了解所有元素的行为方式。
在这里，我制作了一个容器 div 并将其宽度设置为父容器的 90%。 您还可以将其设置为固定测量值，例如 500 像素。 现在，默认情况下，其中的所有 div 都会拉伸以填充其宽度。
然后，我在该容器 div 中放置了一个 div。 它移动到容器 div 的顶部并自动匹配容器的宽度。 它不会自动有任何高度，所以我设置了一个随机高度（您可以调整）。
然后，我没有使用 img 标签，而是将横幅图像变成了这个 div 的背景图像。 （我建议查找 background-size 属性以了解如何调整背景图像的大小）。
接下来，取出所有
<br>标签。 它们不是很好的做法，因为它们很老套，并且不能让您很好地访问内容样式。 相反，将每个段落放在自己的<p>标记中。要将容器 div 在页面上居中，您可以使用样式“margin:auto”。 这使得左侧和右侧具有相等的边距。 如果您不希望它居中，请将其取出并将“float：left”放入样式中。
要查看所有 div 标签的作用，请使用不同的 colors 在它们上放置“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't arrived yet, we are committed to understanding our employees' 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>
解决方案3
0 2020-05-25 01:05:36
你想让文本在图像旁边对齐吗？ 您可以对图像使用float: left样式。
<html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <img alt="" src="https://picsum.photos/400/300" style="float: left" /> <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't arrived yet, we are committed to understanding our employees' 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>
如何在 header 中对齐我的徽标图像？
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.