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/

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

2 个答案: