将三个div并排居中 [英] center three divs side by side

问题描述

我要在页面上并排居中的三个div.我也有一些内容，例如< p> 和< h3> 标记

I have three divs that I want to center side by side on a page. I also have some content such as <p> and <h3> tags in them

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

此操作的结果是3个div大部分都漂浮在左侧.我想在页面上将它们全部居中.

The result of this is just the 3 divs all floating mostly to the left. I want to center all three of them on the page.

推荐答案

尝试在 #wrapper上没有 float 和 text-align:center; 的情况下进行尝试.由于您的代码块是 display:inline-block; ，因此它们的居中方式与文本相同.

Try it without float and with text-align:center; on the #wrapper. Since your blocks are display:inline-block;, they'll center the same way text does.

请注意，为了使其具有响应性，我将所有宽度替换为％，而不是 px ，并删除了一些额外的 margin 间距.我还添加了 vertical-align:top; ，因此div沿顶部对齐.

Note that nto make it responsive, I swapped all your widths to % instead of px and removed some extra margin spacing. I've also added vertical-align:top; so the divs aline along the top.

#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/

这篇关于将三个div并排居中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！