我有一个具有特定宽度和高度的 div。在那个 div 中我也有一个文本。我想将该文本对齐到中心(水平)和中间(垂直)。但是 div 还需要一个 position: absolute
.所以它可以定位在另一个 div 中。
但是因为absolute
文本将不再垂直对齐。
这是我的:
<div style="z-index:20;
position: absolute;
border: 1px dotted #16232d;
width: 300px;
height: 200px;
line-height: 200px;
top:88px; left:31px;
display: table-cell;
line-height: normal;
font-size:32px;
text-align: center;
vertical-align: middle;">
Lorem ipsum dolor sit amet
</div>
示例:http://jsfiddle.net/s8jp5ohh/
文本永远不会包含任何<br>
.所以它总是一根线。但当文本大于 div 的宽度时,它应该自动换行。所以我想保留该功能(就像您在 fiddle 中看到的那样)。
有没有办法让文本居中、垂直和水平对齐?
最佳答案
这将解决它: DEMO
CSS
.myDiv {
z-index:20;
position: absolute;
border: 1px dotted #16232d;
width: 300px;
height: 200px;
top:88px;
left:31px;
line-height: normal;
font-size:32px;
text-align: center;
display: table;
}
.myDiv p {
display: table-cell;
vertical-align: middle;
}
html
<div class="myDiv">
<p>Lorem ipsum dolor </p>
</div>
关于html - 在绝对 div 上垂直对齐中间和文本对齐居中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25494210/