在 HTML 中为电子邮件使用居中对齐答案

【问题标题】：Using center alignment in HTML for e-mail在 HTML 中为电子邮件使用居中对齐
【发布时间】：2013-03-22 18:29:14
【问题描述】：

我开始使用表格为电子邮件编写 html。现在，我第一次尝试使用divs 编写代码，但这导致了一个问题：我无法将过去能够居中的所有内容居中对齐。

我写的可能不正确，但这是我发现的唯一方法，可以在写完后将所有内容从浏览器复制到 Gmail。

谁能告诉我如何在这段代码中居中对齐？

如果有人也可以告诉我是否有更好的方法来编写此代码，我会很高兴收到批评和有用的信息。

P.S：我尝试了填充、定位、边距、放置高度和宽度，但在大多数结果中使用这些选项，我的一半免费或背景完全消失了。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>Untitled Document</title>

 <style type="text/css">
div#Container {
width: 895px;
height: 525px;
position: absolute;
left: 9px;
top: 15px;
}

div#Room {
padding-left: 245px;
padding-top: 80px;
width: 625px;
}

#Room span {
font-family: Times New Roman, Times, serif;
font-weight: bold;
font-size: 23px;
color: #522405;
}

#D { padding-left: 70px;
}

#GD { padding-left: 103px;
}

#GPV { padding-left: 53px;
}

div#Content {
padding-left: 245px;
padding-top: 10px;
width: 625px;
}

#Right {
position: absolute;
left: 872px;
top: 222px;
}

img.Spacer {
margin-left: 10px;
}

div.content {
font-family: Arial, Helvetica, sans-serif;
color: black;
font-size: 17px;
font-weight: bold;
}

.BP {
vertical-align: text-top;
margin-top: 10px;
margin-left: 245px;
}

.table {
vertical-align: text-top;
font-family: Arial, Helvetica, sans-serif;
font-size: 20px;
text-align: center;
color: #002b55;
margin-left:245px;
}

.TD {
margin-left: 30px;
}

.adress {
    font-family: Times New Roman, Times, serif;
font-size: 10px;
text-align: center;
font-weight: bold;
color: #100073; 
}

.OOT {
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
font-weight: bold;
color: #100073;
text-align:center;
}

.res {
vertical-align: top;
padding-left: 25px;
}

</style>

</head>

<body>

<div>

<img style="position: relative;" src="http://i1300.photobucket.com/albums/ag93/dobriyan/E-mail%20-%20Ayara%20Kamala/BK_zpsa93ab347.png" alt="Background" />

</div>

<div id="Container">

<div id="Room" >

    <a href="http://bit.ly/XSyPG5" title="Deluxe" target="_blank" >

    <img src="http://i1300.photobucket.com/albums/ag93/dobriyan/E-mail%20-%20Ayara%20Kamala/D_zpsf4ea5de8.jpg" border="0px" alt="Deluxe" />

    </a>

    <a href="http://bit.ly/XSyPG5" title="Grand Deluxe" target="_blank" >

    <img class="Spacer" src="http://i1300.photobucket.com/albums/ag93/dobriyan/E-mail%20-%20Ayara%20Kamala/GD_zpse78278b7.jpg" border="0px" alt="Grand Deluxe" />

    </a>


    <a href="http://bit.ly/XSyPG5" title="Grand Pool Villa" target="_blank" >

    <img class="Spacer" src="http://i1300.photobucket.com/albums/ag93/dobriyan/E-mail%20-%20Ayara%20Kamala/GPV_zpsb381cd33.jpg" border="0px" alt="Grand Pool Villa" />

    </a>

    <br />

    <a href="http://bit.ly/XSyPG5" title="Deluxe" target="_blank" style="text-decoration: none;"><span id="D">Deluxe</span></a>
    <a href="http://bit.ly/XSyPG5" title="Grand Deluxe" target="_blank" style="text-decoration: none;"><span id="GD">Grand Deluxe</span></a> 
    <a href="http://bit.ly/XSyPG5" title="Grand Pool Villa" target="_blank" style="text-decoration: none;"><span id="GPV">Grand Pool Villa</span></a>
  </div>

  <div id="Content" class="content">Situated on a hill, Ayara Kamala offers a beautiful garden and ocean view rooms. The place of the hotel provides quiet, calm and romantic holiday away from all other hotels on Kamala Beach.
<br />
<br />

Big size of rooms, king size beds and impressive bathrooms, are making Ayara Kamala            perfect selection for couples who are looking for privacy and relaxing holiday.
 </div>

<table class="table" style="border-collapse: separate; border-spacing: 1px;" width="625" border="0">
 <tr>
  <td align="right" style="padding-left: 20px;" width="302"><a href="http://bit.ly/XSyPG5" title="Book Now !"><img src="http://i1300.photobucket.com/albums/ag93/dobriyan/E-mail%20-%20Ayara%20Kamala/BP_zps15c948a1.png" border="0px" alt="Best Rate"/></a></td>
 <td width="321" valign="top"><table class="TD" style="border-collapse: separate; border-spacing: 0px;" border="0px">
 <tr>
 <td height="30" class="res" align="center"><a href="http://bit.ly/XSyPG5" title="B2B Online Booking"><span>www.b2b.onlyonetour.com</span></a></td>
 </tr>
 <tr>
 <td class="res" height="30" align="center"><span>Tel : (66) 02 - 688 - 8883 </span>      </td>
</tr>
<tr>
<td class="res" height="30" align="center"><a href="mailto:rsvn@onlyonetour.com" title="E-mail Reservation"><span>rsvn@onlyonetour.com</span></a></td>
</tr></table>
</td>
</tr>
</table>

<div align="center" id="Right"><a style="text-decoration: none;" href="http://bit.ly/XSyPG5" title="Only One Tour &amp; Travel Group Co., Ltd." target="_blank"><img width="149px" height="90px" src="http://i1300.photobucket.com/albums/ag93/dobriyan/E-mail%20-%20Ayara%20Kamala/logoOOT_zps24c21653.png" border="0px" alt="Logo" /></a>
<a style="text-decoration: none;" href="http://bit.ly/XSyPG5" title="Only One Tour &amp; Travel Group Co., Ltd." target="_blank"><span class="OOT">Only One Tour &amp; Travel<br />Group Co., Ltd.</span></a><br /><br />
<a style="text-decoration: none;" href="http://on.fb.me/XXqq56" title="Only One Tour Facebook Page" target="_blank"> <img src="http://i1300.photobucket.com/albums/ag93/dobriyan/E-mail%20-%20Ayara%20Kamala/facebook-logo-png-format-i18_zps83b6a9aa.png" width="145px" height="50px" border="0px" alt="FB"/></a><br /><br />
 <span class="adress">2128/9-11 Charoenkung Rd.,</span><br />
 <span class="adress">Watprayakrai, Bangkorleam,</span><br />
 <span class="adress">10120 Bangkok, Thailand.</span><br />
<a class="adress"  href="http://bit.ly/XSyPG5" target="_blank">www.b2b.onlyonetour.com</a><br />
<a class="adress" href="http://on.fb.me/XXqq56" target="_blank">www.onlyonetour.com (offline)</a>
 </div>

</div>

</body> 

</html>

【问题讨论】：

首先 - 为什么使用这么多position: absolute？如果您想将div#Content 居中，请删除position: absolute 并设置margin: auto。如果您需要position: absolute，请设置left: 50% 和margin-left: -447px（容器宽度的一半）。
我认为您的意思是我的 div#Cntainer，而不是 div#Content。无论如何，这是因为我希望这个 div 留在我的 Image div 上作为背景。如果您有任何其他建议，请告诉我如何制作。你写给我的这些对我一点帮助都没有……
无论div 想要居中，您都可以通过在px 或% 中设置width 来实现，或者 - 如果它脱离正常流程（如position: absolute） - 通过设置left: 50% 和负边距，例如：margin-left: -(halfOfContainerWidth)px。
这不是关于中心，我使用绝对，因为我希望我的#Container 超过
，我不知道你为什么不明白我在说什么...
可能是因为您写道：“有人能告诉我如何在这段代码中居中对齐吗？”现在你说这与中心无关？ :)

标签： css html alignment center

【解决方案1】：

现在只为newsletter 添加<div align="center"></div>

像这样

<div align="center">

<img style="position: relative;" src="http://i1300.photobucket.com/albums/ag93/dobriyan/E-mail%20-%20Ayara%20Kamala/BK_zpsa93ab347.png" alt="Background" />

</div>

<div id="Container" align="center">

// your code
</div>

【讨论】：

@RohidAzad 谢谢！但现在又出现了一个问题。我刚刚意识到，当我将它作为电子邮件发送时，我的背景图像上的所有内容都在图像的底部。另一个问题是在对齐中心之后，当我将我的#Room、#content、table 和#Right 从“Ayara Kamala”的“K”字母（我的背景中的名称）开始复制到电子邮件时。我试图只使背景 div 居中和#container align-left 或不对齐，但仍然相同...
@DobriyanPetkov 现在定义你的孩子 div text-algn:left 像这样
在你的内部 div 或 table ... ....
我将所有内容都更改为左，但仍然相同。在我的浏览器中看起来不错，但是当我将其移至 g-mail 时它仍然不正确，另一个问题是当我将其作为电子邮件发送时，在收到的电子邮件中 #Container 中的所有内容都已保留我的图像我想用作背景......我知道我想学习这个错误，但是从 2 天开始就不能让它成为应有的方式。如果我打扰了，我很抱歉。

【解决方案2】：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>Untitled Document</title>
 <style type="text/css">
body{
    background: url(http://i1300.photobucket.com/albums/ag93/dobriyan/E-mail%20-%20Ayara%20Kamala/BK_zpsa93ab347.png) no-repeat top#FFF;

}
#wrapper
{
    width:950px;
    margin:0px auto;
    padding:0px;
}


div#Container {
width: 895px;
height: 525px;
position: absolute;
left: 9px;
top: 15px;
}

div#Room {
padding-left: 410px;
padding-top: 80px;
width: 625px;
}

#Room span {
font-family: Times New Roman, Times, serif;
font-weight: bold;
font-size: 23px;
color: #522405;
}

#D { padding-left: 70px;
}

#GD { padding-left: 103px;
}

#GPV { padding-left: 53px;
}

div#Content {
padding-left: 410px;
padding-top: 10px;
width: 625px;
}

#Right {
position: absolute;
left:1030px;
top: 222px;
}

img.Spacer {
margin-left: 10px;
}

div.content {
font-family: Arial, Helvetica, sans-serif;
color: black;
font-size: 17px;
font-weight: bold;
}

.BP {
vertical-align: text-top;
margin-top: 10px;
padding-left: 410px;
}

.table {
vertical-align: text-top;
font-family: Arial, Helvetica, sans-serif;
font-size: 20px;
text-align: center;
color: #002b55;
padding-left: 410px;
}

.TD {
margin-left: 30px;
}

.adress {
    font-family: Times New Roman, Times, serif;
font-size: 10px;
text-align: center;
font-weight: bold;
color: #100073; 
}

.OOT {
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
font-weight: bold;
color: #100073;
text-align:center;
}

.res {
vertical-align: top;
padding-left: 25px;
}

</style>

</head>

<body>
<div id="wrapper">
<div id="Container">

<div id="Room" >

    <a href="http://bit.ly/XSyPG5" title="Deluxe" target="_blank" >

    <img src="http://i1300.photobucket.com/albums/ag93/dobriyan/E-mail%20-%20Ayara%20Kamala/D_zpsf4ea5de8.jpg" border="0px" alt="Deluxe" />

    </a>

    <a href="http://bit.ly/XSyPG5" title="Grand Deluxe" target="_blank" >

    <img class="Spacer" src="http://i1300.photobucket.com/albums/ag93/dobriyan/E-mail%20-%20Ayara%20Kamala/GD_zpse78278b7.jpg" border="0px" alt="Grand Deluxe" />

    </a>


    <a href="http://bit.ly/XSyPG5" title="Grand Pool Villa" target="_blank" >

    <img class="Spacer" src="http://i1300.photobucket.com/albums/ag93/dobriyan/E-mail%20-%20Ayara%20Kamala/GPV_zpsb381cd33.jpg" border="0px" alt="Grand Pool Villa" />

    </a>

    <br />

    <a href="http://bit.ly/XSyPG5" title="Deluxe" target="_blank" style="text-decoration: none;"><span id="D">Deluxe</span></a>
    <a href="http://bit.ly/XSyPG5" title="Grand Deluxe" target="_blank" style="text-decoration: none;"><span id="GD">Grand Deluxe</span></a> 
    <a href="http://bit.ly/XSyPG5" title="Grand Pool Villa" target="_blank" style="text-decoration: none;"><span id="GPV">Grand Pool Villa</span></a>
  </div>

  <div id="Content" class="content">Situated on a hill, Ayara Kamala offers a beautiful garden and ocean view rooms. The place of the hotel provides quiet, calm and romantic holiday away from all other hotels on Kamala Beach.
<br />
<br />

Big size of rooms, king size beds and impressive bathrooms, are making Ayara Kamala            perfect selection for couples who are looking for privacy and relaxing holiday.
 </div>

<table class="table" style="border-collapse: separate; border-spacing: 1px;" width="625" border="0">
 <tr>
  <td align="right" style="padding-left: 20px;" width="302"><a href="http://bit.ly/XSyPG5" title="Book Now !"><img src="http://i1300.photobucket.com/albums/ag93/dobriyan/E-mail%20-%20Ayara%20Kamala/BP_zps15c948a1.png" border="0px" alt="Best Rate"/></a></td>
 <td width="321" valign="top"><table class="TD" style="border-collapse: separate; border-spacing: 0px;" border="0px">
 <tr>
 <td height="30" class="res" align="center"><a href="http://bit.ly/XSyPG5" title="B2B Online Booking"><span>www.b2b.onlyonetour.com</span></a></td>
 </tr>
 <tr>
 <td class="res" height="30" align="center"><span>Tel : (66) 02 - 688 - 8883 </span>      </td>
</tr>
<tr>
<td class="res" height="30" align="center"><a href="mailto:rsvn@onlyonetour.com" title="E-mail Reservation"><span>rsvn@onlyonetour.com</span></a></td>
</tr></table>
</td>
</tr>
</table>

<div align="center" id="Right"><a style="text-decoration: none;" href="http://bit.ly/XSyPG5" title="Only One Tour &amp; Travel Group Co., Ltd." target="_blank"><img width="149px" height="90px" src="http://i1300.photobucket.com/albums/ag93/dobriyan/E-mail%20-%20Ayara%20Kamala/logoOOT_zps24c21653.png" border="0px" alt="Logo" /></a>
<a style="text-decoration: none;" href="http://bit.ly/XSyPG5" title="Only One Tour &amp; Travel Group Co., Ltd." target="_blank"><span class="OOT">Only One Tour &amp; Travel<br />Group Co., Ltd.</span></a><br /><br />
<a style="text-decoration: none;" href="http://on.fb.me/XXqq56" title="Only One Tour Facebook Page" target="_blank"> <img src="http://i1300.photobucket.com/albums/ag93/dobriyan/E-mail%20-%20Ayara%20Kamala/facebook-logo-png-format-i18_zps83b6a9aa.png" width="145px" height="50px" border="0px" alt="FB"/></a><br /><br />
 <span class="adress">2128/9-11 Charoenkung Rd.,</span><br />
 <span class="adress">Watprayakrai, Bangkorleam,</span><br />
 <span class="adress">10120 Bangkok, Thailand.</span><br />
<a class="adress"  href="http://bit.ly/XSyPG5" target="_blank">www.b2b.onlyonetour.com</a><br />
<a class="adress" href="http://on.fb.me/XXqq56" target="_blank">www.onlyonetour.com (offline)</a>
 </div>

</div>
</div>
</body> 

</html>

我更改了您的代码并使其居中对齐。对于首先使用 div，您已设置主 id（名为 warapper 的 div）并将边距设置为 margin:0px auto;它会自动将您的页面中心与所有浏览器对齐

【讨论】：

感谢您的回答！但我没有使用正文背景，因为我无法从浏览器中获取布局并将其放入电子邮件中。我想将此 html 代码用于时事通讯。而且您对#Room、#Content、和#Right 的对齐方式与我需要的不同（没关系，我可以修复填充），但它仍然无法按照我需要的方式工作。

【解决方案3】：

通过设置width: 100%;给容器整个页面的宽度，然后将你想要居中的div的边距设置为自动：

margin-left: auto;
margin-right: auto;

【讨论】：

如果容器是块元素，而且很可能是块元素，那么将它的width 设置为100% 是没有意义的，除非它从正常流程中取出。