1

このフィドルで読み込みバーをいじっていますが、このコードがあります

html

<div id="back"><span id="text">loading...</span></div>

CSS

#back {
    width:100px;
    background-color:#bbbbbb;
}

#text {
    z-index:2;
    height:30px;
    position: absolute;
    margin:auto;
}

div{
    height:30px;
    position: absolute;
}

まだspanマージンがありません。このように見えます

画像

通常のmargin値を指定すると機能します。

私も試しmargin: 0 auto;ましたが、成功しませんでした。そして、私がしようとすると、取得できますがmargin:10px auto;、取得でき10pxませんauto。

4

2 に答える 2

1

幅が不明な絶対位置のインライン要素に自動マージンを適用すると、さまざまな問題が発生します。

line-height次のtext-align:centerように設定することで、テキストを中央に配置することに成功しました。

#text {
    position: absolute;
    z-index:2;
    width:100%;
    height:30px;
    line-height:30px;
    text-align:center;
}

http://jsfiddle.net/ruzED/

于 2013-09-16T23:19:37.147 に答える
1

これは、テキストが絶対位置であるためです。これを試して：

#back {
    width:100px;
    background-color:#bbbbbb;
    text-align:center;
}

#text {
    z-index:2;
    height:30px;
    line-height:30px;
    position: relative;
}

JSFiddle: http://jsfiddle.net/h6BRn/13/

于 2013-09-16T23:20:24.347 に答える