Question

我想将.SideBarFirst div的内容集中在一起，但不知道如何实现这一目标。

有人可以帮我解决一个不是基于向元素添加padding或left/right值的解决方案吗？

CSS：

body {
    width: 960px;
    margin: 0 auto;
} 

.content {
    width:500px; 
    float: left;
}

.SideBarFirst {
    width:460px; 
    float: right;
}

.SideBarFirst div {
    width: 40px;
    margin: 0 auto; 
}

HTML：

<body>
    <div class="content">test</div>
    <div class="SideBarFirst">
        <div>not working for center</div>
    </div>
</body>

我目前的代码：http://jsfiddle.net/mmnaderi/yTCkx/

Answer 1

删除它：

body {
    width: 960px;
    margin: 0 auto;
}

使用它：

<强> HTML

<div class="content">test</div>
<div class="SideBarFirst">
    <div>not working for center</div>
</div>

<强> CSS：

.content {width:500px; float : left;}

.SideBarFirst {width:460px; float : right;}

.SideBarFirst div {
    width: 40px;
    margin: 0 auto; 
}

See This Fiddle

Answer 2

你可以使用％

.SideBarFirst div {
    width: 40px;
    margin: 0 50%; 
}

或者你可以更粗野，试试这个：

.SideBarFirst div {
    width: 40px;
    margin-left: 210px; 
}

弹性布局无法正常使用第二个代码

或者这个：

<div class="content">test</div>
<div class="SideBarFirst">
    <div align="center">not working for center</div>
</div>

请看这个：How to horizontally center a <div> in another <div>?

Answer 3

您的问题是您将元素浮动到左侧，以便它始终显示在左侧。如果你想集中它，那就改变你的css：

.content {width:500px; float : left;}

.SideBarFirst {width:460px; float : right;}

.SideBarFirst div {
    width: 40px;
    margin: 0 auto; 
}

同时删除此内容：

body {
    width: 960px;
    margin: 0 auto;
}

Answer 4

这是浏览器问题，现在已修复。

如何将div中的元素居中

4 个答案: