5

ページの上と左から 100 ピクセルの青いボックスがあります。次に、青いボックス内のテキストを垂直方向に揃えます。以下のコードでテキストが垂直方向に整列されないのはなぜですか?

<!DOCTYPE html>
<html>
        <body>
                <div style="height:200px; background:blue; display:table-cell; vertical-align:middle; color:white;position:absolute; top:100px; left:100px;">
                        this is text;
                </div>
        </body> 
</html>

テキストを垂直方向に揃えるにはどうすればよいですか?

注- 絶対位置を削除すると、テキストが垂直方向に配置されます。しかし、これは受け入れられません。なぜなら、他のいくつかのことのために絶対的な位置付けが必要だからです。

4

4 に答える 4

2

次のように別の div に含めます。

CSS

#Div0 {
    position:absolute; 
    top:100px; 
    left:100px;
}

#Div1 {
    height:200px; 
    background:blue; 
    display:table-cell; 
    vertical-align:middle; 
    color:white;
}

HTML

<div id="Div0">
    <div id="Div1">
        this is text
    </div>
</div>​​​​​​​​​​​​​​​​​​​

ソリューション例: http://jsfiddle.net/rgDfg/

于 2012-12-14T03:56:15.643 に答える
2

を削除すると動作します。position: absolute;

したがって、CSS は次のようになります。

div{
    height:200px;        
    background:blue; 
    display:table-cell;
    vertical-align: middle;
    color: white;
}

フィドルリンクを確認してください

于 2012-12-14T03:58:51.183 に答える
0

CSS の最も純粋な方法は、display属性を次のように使用することです。

#foo { display: table; position: absolute; } 
#bar {
    display: table-cell;
    vertical-align: middle;
    height: 200px
}

次に、あなたのhtml

<div id="foo">
    <div id="bar">
        Your text
    </div>
</div>

中央に配置する必要があります..そして#foo、あなたが取り除きたくない絶対的な位置を持っています..

于 2012-12-14T03:58:40.587 に答える