显示：表格和文本右对齐不起作用答案

【问题标题】：Display: table and text-align right not working显示：表格和文本右对齐不起作用
【发布时间】：2011-10-14 09:50:10
【问题描述】：

我有一个这样的 html 结构：

<div class="campain">
    <div class="campainText">
        <a href="#"><h2>Ny app til iPhone og iPad</h2></a>
        <a href="#"><h2>Tips og vinn</h2></a>
    </div>
    <div class="campainPicture">
        Picture goes here
    </div><div class="clear"></div>
</div>

我希望campainText 右对齐。这个元素的css是这样的：

font-family: 'Spinnaker', sans-serif;
font-size: 17px;
color: #FFFFFF;
background-color: #A2AD00;
display: table;
padding: 4px;
margin: 4px 4px 4px 4px;
text-decoration: none;

我知道 css 的其余部分正在工作。问题是如果我在显示字段中包含表格选项，则文本是左对齐的。一旦我删除它，它就会按预期工作。是否有任何解决方法，或者我必须使用 display: inline 和 <br /> 标签？

【问题讨论】：

标签： html css text-align

【解决方案1】：

小提琴：http://jsfiddle.net/xbNCZ/

“表格 + text-align:right 不起作用”，因为默认情况下表格元素不会拉伸到全宽。添加width:100% 即可得到想要的结果。

Before / After 设置width:100%。

【讨论】：

要使 text-align 起作用，您应该在元素上设置一个宽度，但是任何宽度都可以，它不一定必须是 100%。
@Jan-Henk 较小的宽度不会产生所需的结果。 OP 请求的宽度等于普通div 元素的大小，即100%。
我刚刚添加了这条评论作为旁注来解释为什么 text-align 属性不起作用，那是因为没有设置宽度。你说得对，OP 需要 100% 的宽度。