css - margin:auto; not adding a margin

Question

im playing around with a loading bar in this fiddle, and i have this code

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;
}

yet the span does not have a margin, it looks like this

when i give it a normal margin value it works.

i have also tried margin: 0 auto; but also with no success. and when i try margin:10px auto; i get the 10px but not the auto.

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

Answer 2

将自动边距应用于宽度未知的绝对定位的内联元素会带来各种问题。

我通过设置成功地将文本居中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/