logo标签列表

将三个div居中并且并排放置

htmlcss
4
我有三个div，我想让它们并排居中在页面上。我还在其中放置了一些内容，例如<p>和<h3>标签。
HTML（示例）
<div id = "wrapper">

    <div class = "aboutleft"> 
        <h1> About us </h1>
        <h3> small description </h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tristique non odio nec 
            A few sentences about you go here 
        </p>
    </div>

    <div class = "vline"></div>

    <div class = "aboutright">
        <h1> About the shop/Clients </h1>
        <h3> small description </h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tristique non odio ne
            A few sentences about you go here 
        </p>
    </div>
</div>

CSS

.aboutleft
{
    display:inline-block;
    float:left;
    width: 450px;       
}

#wrapper
{
    text-align:center;
    width: 80%;
    margin: 0, auto;    
}
.aboutright
{
    display: inline-block;
    float:right;
    width: 450px;
}

.vline
{
    background: rgb(186,177,152);
    display: inline-block;
    float: left;
    min-height: 250px;
    margin: 0 30px;
    width: 1px;
}

结果是三个div都大多浮动到了左边。我想把它们三个居中放在页面上。

4个回答
10

尝试在 #wrapper 上使用 text-align:center; 而不是 float。由于您的块采用了 display:inline-block;，所以它们与文本一样居中。

请注意，为使其响应式，我将所有宽度都改为了 %，而不是 px，并删除了一些额外的 margin 空间。我还添加了 vertical-align:top;，以便 div 沿顶部对齐。

#wrapper{
    text-align:center;
    width: 80%;
    margin: 0 auto;
    text-align: center;
}
.aboutleft,
.aboutright{
    display: inline-block;
    vertical-align:top;
    width: 48%;
}
.vline{
    background: rgb(186,177,152);
    display: inline-block;
    vertical-align:top;
    min-height: 250px;
    margin: 0;
    width: 1px;
}

http://jsfiddle.net/daCrosby/Ce3Uz/2/

1
是的
margin: 0 auto

没有逗号

但是您的div可能应该全部都有

float: left

同样也可以。然后它们将从左侧流过页面。

翼

0

不要在边距处使用“，”。在您的CSS中使用它作为“.wrapper”的解决方案即可。

margin: 0 auto;

此外，如果您对wrapper的子元素使用了绝对宽度，那么最好也将wrapper的值固定，这样可以使div相对于其子元素居中。
0

你可以直接移除浮动。在包装器上使用text-align:center将使你的display:inline-block元素并排对齐。

我用你的内容制作了一个演示。我还添加了一个“centerstuff”div，你应该把居中的内容放在里面，并将宽度缩小，以便更清晰地显示。

http://jsfiddle.net/rNcHY/

就像其他人指出的那样，它只是margin: 0 auto。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接