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

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

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

请参阅： http://jsfiddle.net/2WNPm/12/

Answer 2

 .rm-line span {

     background-color: #FFF;
     padding: 0 10px;
     top: -4px;    
    margin:auto;
    display:block;
 }

Answer 3

我不知道为什么，但是在Firefox中，如果将span-box位置设置为relative，它似乎可以正常工作：

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

水平居中一个没有固定宽度的绝对元素

3 个答案: