如何將我的文本與我的 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.