保证金：汽车;没有增加保证金

Question

我正在玩this fiddle中的加载栏，我有这个代码

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。

Answer 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/

Answer 2

这是因为文本是绝对的位置。试试这个：

#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/