如何在不使用内联高度的情况下垂直对齐div内的文本

Question

在下面的示例中，我尝试将文本垂直对齐并放在中间位置。水平。

由于某种原因，它没有正确提出我尝试了一些例子

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

Answer 1

您可以添加到 css

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

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

Answer 2

demo 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＆amp;得到结果：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)";
}