css - インラインの高さを使用せずに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/

2番目のデモ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)";
}