css - 如何在不考虑浮动元素的情况下居中？

Question

在设置页面样式时，假设我有一个要浮动的元素：右，在它之前我有一个内联元素，我想水平居中而不考虑浮动元素。 我只能让它在浮动元素和边距之间居中；我希望它忽略浮动元素并在其容器中居中。

<div class="container">
    <span class="headline">this Needs centering</span>
    <span class="corner-tag">without regard to this<span>
</div>

我第一次尝试风格：

.container {text-align: center; } 
.corner-tag {
    border: 1px solid black;
    float: right; 
}

这是小提琴：

http://jsfiddle.net/szal/6zgbw/

我可以在不修改标记的情况下修改样式来实现这一点吗？

Answer 1

除非您绝对需要使用，否则您float:right;可以尝试以下操作：

.container {
    text-align: center;
    position: relative;
}
.container-tag {
    border: 1px solid black;
    position: absolute;
    right: 0;
}

这是 JSFiddle：http: //jsfiddle.net/6zgbw/2/

Answer 2

您可以通过使用绝对定位将 .headline 或 .corner-tag 从流程中取出来做到这一点：

.container { text-align: center; }

.headline { 
    position: absolute; 
    z-index: 10; }

.corner-tag {
    position: relative;
    z-index: 20;
    border: 1px solid black;
    float: right; }

小提琴：http: //jsfiddle.net/6zgbw/1/