显示:表格和文本对齐不起作用

时间:2011-10-14 09:50:10

标签: html css text-align

我有一个像这样的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-field中包含table-option,则文本是左对齐的。一旦我删除它,它按预期工作。有没有相关的解决方法,或者我是否必须使用display:inline和<br />标签?

1 个答案:

答案 0 :(得分:15)

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

“表格+ text-align:right不起作用”,因为默认情况下表格元素不会拉伸到整个宽度。添加width:100%以获得所需的结果。

Before / After设置width:100%