Question

我无法将文字设为垂直中心。我的文字被放置在位置：绝对div。

<div class="mydiv">Frameworks and Extensions</div>

和CSS：

.mydiv{
    width:100px;
    height:70px;
    border:1px solid red;
    position:absolute;
    text-align:center;
    background-color:#ccc;    
}

请参阅小提琴：http://jsfiddle.net/3Zv5s

有时文字会出现两行或一行。文本应该在表td中的垂直中心。

感谢您宝贵的时间和建议。

Answer 1

尝试使用此CSS：

.mydiv{
    width:100px;
    height:70px;
    border:1px solid red;
    display: table-cell;
    vertical-align: middle;
    text-align:center;
    background-color:#ccc;    
}

Try this

<强>已更新

您可以将容器设置为position: absolute;并将.mydiv设置为display:table-cell和vertical-align:middle。

HTML -

<div id="container"><div class="mydiv">Frameworks and Extensions</div></div>

CSS -

#container{
    position: absolute;
}

.mydiv{
    width:100px;
    height:70px;
    border:1px solid red;
    display: table-cell;
    vertical-align: middle;
    text-align:center;
    background-color:#ccc;    
}

Try for this

Answer 2

您可以将文字放入表格并使用vertical-align

http://jsfiddle.net/3Zv5s/6/

Answer 3

试试这个：

HTML：

<div class="mydiv">
    <span class="span">Frameworks and Extensions</span>
</div>

CSS：

.mydiv{display:table-row;}
.span{display:table-cell;vertical-align:middle;height:inherit;}

Fiddle here.

Answer 4

您可以使用display: table和display: table-cell的组合。

略微改变你的标记：

<div class="mydiv">
    <div>Frameworks and Extensions</div>
</div>

你的CSS：

.mydiv{
    width:100px;
    height:70px;
    border:1px solid red;
    display: table;
    background-color:#ccc;  
    overflow: hidden;
}

.mydiv div {
    vertical-align: middle;
    display: table-cell;
}

http://jsfiddle.net/3Zv5s/2/

Answer 5

选项＃1：table-cell

最简单的解决方案，但仅适用于IE7 +

<div class="mydiv">
    <span>Frameworks and Extensions</span>
</div>

.mydiv {
    width:100px;
    height:70px;
    border:1px solid red;
    position:absolute;
    text-align:center;
    background-color:#ccc;   

    display: table;
}
.mydiv>span {
    display: table-cell;
    vertical-align: middle; 
}

<强> Fiddle

选项＃2：双跨

有点棘手，但在IE7下工作

<div class="mydiv">
    <span><span>Frameworks and Extensions</span></span>
</div>

.mydiv {
    width:100px;
    height:70px;
    border:1px solid red;
    position:absolute;
    text-align:center;
    background-color:#ccc;   

    display: block;
    line-height: 65px; /* 70px applied on 1st span */
}
.mydiv>span {
    display: inline-block;
    vertical-align: middle; /* 2nd span centered */
    line-height: 0;
}
.mydiv>span>span {
    line-height: 20px; /* here's the "true" line-height */
}

<强> Fiddle

垂直居中文本

5 个答案:

选项＃1：table-cell

选项＃2：双跨