如何将我的文本与我的 header 图像对齐？
[英]How Can I Align my texts with my header image?
问题描述
I have an image header used in an automatic reply Email system, How can I align my text to the image?
我在自动回复 Email 系统中使用了图像 header，如何将文本与图像对齐？
Here is how it looks like:这是它的样子：
Source Code:源代码：
<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
You can put your <p> in a <div> and give it an inline style like this:你可以把你的<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
Here is one approach:这是一种方法：
To really answer your question thoroughly, I recommend learning about the CSS box model, in order to understand how all of the elements behave.要真正彻底回答您的问题，我建议了解 CSS 框 model，以了解所有元素的行为方式。
Here, I made a container div and set its width to 90% of the parent container.
在这里，我制作了一个容器 div 并将其宽度设置为父容器的 90%。 You can also set it to a fixed measurement, like 500px.您还可以将其设置为固定测量值，例如 500 像素。 Now, all of the divs that are inside it will stretch to fill it's width, by default.现在，默认情况下，其中的所有 div 都会拉伸以填充其宽度。Then, I put a div inside of that container div.
然后，我在该容器 div 中放置了一个 div。 It moves to the top of the container div and automatically matches the width of the container.它移动到容器 div 的顶部并自动匹配容器的宽度。 It will not have any height automatically, so I set a random height (which you can adjust).它不会自动有任何高度，所以我设置了一个随机高度（您可以调整）。Then, instead of using an img tag, I made the banner image into a background image of this div.
然后，我没有使用 img 标签，而是将横幅图像变成了这个 div 的背景图像。 (I recommend looking up background-size property to learn how to size the background image). （我建议查找 background-size 属性以了解如何调整背景图像的大小）。Next, take out all of the
<br>tags.接下来，取出所有<br>标签。 They're not good practice for because they're hacky and don't give you good access to styling your content.它们不是很好的做法，因为它们很老套，并且不能让您很好地访问内容样式。 Instead, put each paragraph in its own <p>tag.相反，将每个段落放在自己的<p>标记中。To center the container div on the page, you can use the style "margin:auto."
要将容器 div 在页面上居中，您可以使用样式“margin:auto”。 That makes the left and the right side have an equal margin.这使得左侧和右侧具有相等的边距。 If you don't want it to be centered, take that out and put "float:left" in the style.如果您不希望它居中，请将其取出并将“float：left”放入样式中。To see how all of the div tags are acting, put a "border:solid purple 2px" on them with different colors.
要查看所有 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
Do you want the text to align next to the image?你想让文本在图像旁边对齐吗？ You can use float: left style to the image.您可以对图像使用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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.