我正在尝试找到最有效的方法来将文本与div对齐。我尝试了一些方法,但似乎没有一个有效。
.推荐文本{位置:绝对;左:15px;顶部:15px;宽度:150px;高度:309px;垂直对齐:中间;文本对齐:居中;字体系列:Georgia,“Times New Roman”,Times,serif;字体样式:斜体;填充:1em 0 1em 0;}<div class=“推荐文本”>Lorem ipsum dolor sit amet,consectetur adipiscing elit,sed do eiusmod tempor incididunt ut labore et dolore magna aliqua。在最低限度的威尼斯,quis nostrud exerciation ullamco labour nisi Ut aliquip ex a commo consequat。Duis aute irure多尔代表在voluptate velit esse cillum dolore eu fugiat nullapariator。除了你偶尔犯下的错误外,你还得承担责任,这是因为你在实验室里表现得很糟糕。</div>
有一种更简单的方法可以垂直对齐内容,而无需诉诸表格/表格单元格:
http://jsfiddle.net/bBW5w/1/
在其中,我添加了一个不可见的(width=0)div,它假设容器的整个高度。
它似乎可以在Internet Explorer和Firefox(最新版本)中使用。我没有检查其他浏览器
<div class="t">
<div>
everything is vertically centered in modern IE8+ and others.
</div>
<div></div>
</div>
当然,CSS:
.t, .t > div:first-child
{
border: 1px solid green;
}
.t
{
height: 400px;
}
.t > div
{
display: inline-block;
vertical-align: middle
}
.t > div:last-child
{
height: 100%;
}
您可以通过将显示设置为“表格单元格”并应用垂直对齐:middle;:
{
display: table-cell;
vertical-align: middle;
}
然而,根据我从中复制的摘录,这并非所有版本的Internet Explorer都支持http://www.w3schools.com/cssref/pr_class_display.asp未经许可。
注意:Internet Explorer 7和更早版本不支持值“内联表”、“表”、表标题、表单元格、表列、表列组、表行、表行组和继承”。Internet Explorer 8需要!DOCTYPE。Internet Explorer 9支持这些值。
下表显示了允许的显示值http://www.w3schools.com/cssref/pr_class_display.asp.