html - 如何在浮动元素旁边时使元素居中？

Question

我有一个想要相对于页面居中的元素，同时有一个浮动元素与它内联。

html:

<div class="container">
  <span class="centerMe">I should be centered</span>
  <span class="ontheright">I'm on the right!</span>
</div>

CSS：

.container{ text-align:center }
.centerMe{
  margin-left:auto;
  margin-right:auto;
}
.ontheright{float:right;}

问题是在浮动元素用完之后，居中的元素相对于剩余的空间居中。我希望它相对于容器的整个宽度居中。我尝试过使用position:absolute而不是浮动，但是当屏幕太小时它会发生碰撞。

http://jsfiddle.net/j5Mff/

Answer 1

您可以在 -100% 的右浮动元素上放置左边距。

这是我在该小提琴的分叉版本中的答案：

http://jsfiddle.net/frKET/1/

.container {
    position:relative;
    text-align:center
}
.centerMe {
    margin-left:auto;
    margin-right:auto;
}
.ontheright {
    float: right;
    margin-left: -100%;
}

Answer 2

您还可以将相对定位设置为 center-me div，以便您可以定义 left 属性：

.centerMe {
margin-left:auto;
margin-right:auto;
position: relative;
left: 70px;
}

对于在小屏幕宽度上发生碰撞的问题，您可以使用媒体查询：

@media screen and (max-width: 320px) {
.ontheright {
    float: none;
    top: 20px;
}
}

确保在您的 HTML 中包含元视口标签以进行媒体查询。

这是一个小提琴

Answer 3

如果浮动元素始终位于顶部，则始终可以将其更改为绝对定位。

http://jsfiddle.net/j5Mff/1/

.container {
    position:relative;
    text-align:center
}
.centerMe {
    margin-left:auto;
    margin-right:auto;
}
.ontheright {
    position:absolute;
    top:0;
    right:0;
}