时间戳

首页 > 解决方案 > 如何将 p 标签与中心标签的左侧对齐？

html - 如何将 p 标签与中心标签的左侧对齐？

问题描述

我想对齐中心标签内的 ap 选项卡。这是我的代码的一部分：

<center>
    <div border="0" style="width: 640px; mso-line-height-rule: exactly; line-height: 22px; vertical-align: middle; height: 40px; border: none; padding-left: 10px; font-family: Arial, Tahoma, sans-serif; font-weight: normal; font-size: 10pt; background-color: #f5f5f5; padding-top: 0; padding-bottom: 0; margin-top: 30px; margin-bottom: 0px;" valign="middle">
        <p style="width: 440px; padding-top: 10px; padding-bottom: 0px; margin-bottom: 0px; ">This text should be aligned left</p>
    </div>
</center>
<center>
    <div border="0" style="width: 640px; mso-line-height-rule: exactly; line-height: 22px; vertical-align: middle; height: 60px; border: none; padding-left: 10px; font-family: Arial, Tahoma, sans-serif; font-weight: normal; font-size: 10pt; background-color: #f5f5f5; padding-top: 0; padding-bottom: 0; margin-top: 3px; margin-bottom: 30px;" valign="middle">
        <p style="width: 440px; padding-top: 10px; padding-bottom: 0px; margin-bottom: 0px; margin-top: 3px;">This text should be centered.</p>
        <a href="#">A URL </a>
    </div>
</center>

我不能删除中心标签，但当然可以改进。我愿意接受建议。

标签： htmlcss

解决方案

只需删除<center>不再使用的标签（HTML4 我的东西）。在您的 p 上添加一个类并使用text-align: centercss 属性（如果您想将所有内容居中，则使用 div ）。

我也style="width: 440px;"从<p>标签中删除了。

.text-center{
  text-align:center;
}
<div border="0" style="width: 640px; mso-line-height-rule: exactly; line-height: 22px; vertical-align: middle; height: 40px; border: none; padding-left: 10px; font-family: Arial, Tahoma, sans-serif; font-weight: normal; font-size: 10pt; background-color: #f5f5f5; padding-top: 0; padding-bottom: 0; margin-top: 30px; margin-bottom: 0px;" valign="middle">
  <p style="width: 440px; padding-top: 10px; padding-bottom: 0px; margin-bottom: 0px; ">This text should be aligned left</p>
</div>


<div border="0" style="width: 640px; mso-line-height-rule: exactly; line-height: 22px; vertical-align: middle; height: 60px; border: none; padding-left: 10px; font-family: Arial, Tahoma, sans-serif; font-weight: normal; font-size: 10pt; background-color: #f5f5f5; padding-top: 0; padding-bottom: 0; margin-top: 3px; margin-bottom: 30px;" valign="middle">
<p class="text-center" style="padding-top: 10px; padding-bottom: 0px; margin-bottom: 0px; margin-top: 3px;">This text should be centered.</p>
<a href="#">A URL </a>
</div>

推荐阅读