css - 如何在不使用 inline-height 的情况下垂直对齐 div 内的文本

Question

在下面的示例中，我试图垂直和水平对齐中间的文本。

由于某种原因它没有正确出现我也尝试了几个例子

http://jsfiddle.net/kayen/JBnbG/

Answer 1

你可以添加到你的CSS

text-align: center;
line-height: 30px;

http://jsfiddle.net/JBnbG/4/

Answer 2

演示http://jsfiddle.net/AMcnZ/22/

第二次演示http://jsfiddle.net/AMcnZ/32/

.boxcaption{
        float: left;
        position: absolute;
        background: #000;
        height: 25px;
        width: 100%;
        opacity: .6;
        padding-top:3px;
       text-align:center;
        /* For IE 5-7 */
        filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=60);
        /* For IE 8 */
        -MS-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
         }

Answer 3

这是您可以使用 CSS 执行的操作并获得结果：http: //jsfiddle.net/surendraVsingh/AMcnZ/31/

height从中删除.boxcaption。

.boxcaption{
    float: left;
    position: absolute;
    background: #000;
    width: 100%;
    text-align:center; /*Add this*/
    padding:5px 0 0 0; /*Add this*/
    opacity: .6;
    /* For IE 5-7 */
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=60);
    /* For IE 8 */
    -MS-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
}