html - 水平居中没有固定宽度的绝对元素

Question

我试图让一个绝对元素在没有固定宽度的情况下居中对齐，这是我试过的:

.rm-line {
    background-color: #CCC;
    height: 4px;
    position: relative;
    text-align: center;
}

.rm-line span {
    position: absolute;
    background-color: #FFF;
    padding: 0 10px;
    top: -4px;  
}

演示在 jsFiddle .正如您在演示中看到的，文本没有居中，我需要它以任何文本宽度居中，即使文本有更多或更少的字符，它也应该在中间对齐。

我怎样才能做到这一点？

Answer 1

假设不需要使用相对/绝对定位..

您应该在 span 上使用 display: inline-block 而不是 position: absolute。 span 将在 div 上以 text-align:center 为中心。

参见: http://jsfiddle.net/2WNPm/12/