2

我想将内容居中，.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/

4

4 回答 4

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

看到这个小提琴

于 2013-07-28T12:10:40.633 回答
0

您的问题是您将元素浮动到左侧，以便它始终出现在左侧。如果您想将其居中，请将您的 css 更改为：

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

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

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

还要删除这个：

body {
    width: 960px;
    margin: 0 auto;
}
于 2013-07-28T12:26:27.793 回答
0

您可以使用 ％

.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>

看看这个：如何在另一个 <div> 中水平居中一个 <div>？

于 2013-07-28T12:19:04.733 回答
0

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

于 2017-06-25T08:16:08.633 回答