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的相对位置，以便您可以定义左侧属性：

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

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

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

请务必在HTML中包含元视口标记以进行媒体查询。

这是fiddle

Answer 3

如果它始终位于顶部，你可以随时将float元素更改为绝对定位。

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;
}

如何将浮动元素放在旁边的元素居中？

3 个答案: