如何在文本和水平方向上将文本显示在此DIV的中心？

Question

我需要垂直和水平居中文本.有没有一种简单的方法来执行以下代码？

<div style="display: block; height: 25px;">
    <span id="ctl_txt" style="background-color: rgb(255, 0, 0);">
        Basic
    </span>
</div>

Answer 1

您可以使用该text-align属性水平居中文本,并line-height等于div高度以垂直居中内联元素.

<div style="display: block; height: 25px; text-align:center; line-height:25px;">
    <span id="ctl_txt" style="background-color: rgb(255, 0, 0);">Basic</span>
</div>

这里的例子.

Answer 2

与@Jose不同的另一种方法是使用

display:table; 和 display:table-cell

像这样

div{
    display:table; 
    height:125px;  //JUST FOR SHOW
    width:125px;   //JUST FOR SHOW
}

span{
    background-color: rgb(255, 0, 0);
    display:table-cell;
    vertical-align:middle;
    text-align:center;
}

然后vertical-align:middle;和text-align:center;做的工作.

示例: http ://jsfiddle.net/jasongennaro/unfwL/1/