Html 无固定宽度的绝对元素水平居中 我试图让一个绝对元素在中间没有固定的宽度对齐，这是我尝试过的： .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; }

演示在。正如你在演示中所看到的，文本不是中心的，我需要它以任何文本宽度为中心，即使文本有更多或更少的字符，它应该在中间对齐。

---

如何实现这一点？

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

 .rm-line span {

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

您应该在

span

上使用

display:inline block

，而不是

position:absolute

。

span

将通过

div

上的

text align:center

居中

---

请参见：

我不知道为什么，但在Firefox中，如果您将span框位置设置为相对位置，它似乎可以正常工作：

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

---

由于您只使用左/右

填充

，因此甚至不需要添加

显示：内联块

-默认的

内联

效果很好：干杯。这帮了大忙。：-）