Question

我有一个具有一定宽度和高度的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的宽度时，它应该自动断开到新行。因此，我希望保留该功能（就像您可以在小提琴中看到的那样）。

有没有办法在中心，垂直和水平对齐文字？

Answer 1

这将解决它： 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>

Answer 2

你必须使用hack，但它有效：

JSFiddle.

HTML

<div class="block" 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;">
    <p style="vertical-align: middle; display: inline-block;"> Lorem ipsum dolor sit    amet</p>

CSS：

.block:before {
    content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -0.25em;
}

绝对div上的vertical-align中间和text-align中心

2 个答案: