将三个 div 并排居中答案

【问题标题】：center three divs side by side将三个 div 并排居中
【发布时间】：2013-07-09 02:57:31
【问题描述】：

我想在页面上并排居中放置三个 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;
}

这样做的结果是 3 个 div 大部分都向左浮动。我想将它们三个都集中在页面上。

【问题讨论】：

标签： html css

【解决方案1】：

不要在页边空白处使用 ,。在你的 .wrapper 的 css 中使用它可以解决这个问题。

margin: 0 auto;

另外，如果您为 wrapper 的子级使用绝对宽度，您也可以为 wrapper 使用固定值，因为这将使 div 居中于子级。

【讨论】：

【解决方案2】：

是的

margin: 0 auto

没有逗号

但你的 div 也应该 all 有

float: left

也是。然后它们将从页面左侧流过。

翼

【讨论】：

【解决方案3】：

你可以删除你的浮动。在包装器上使用text-align:center 将像这样将您的display:inline-block 元素并排对齐。

我就是在这样做时对您的内容进行了修改。我还添加了一个 'centerstuff' div，您应该在其中放置中心内容，并使宽度更小，以便更明显。

http://jsfiddle.net/rNcHY/

正如其他人所指出的，它只是 margin: 0 auto。

【讨论】：

【解决方案4】：

在#wrapper 上不使用float 和使用text-align:center; 进行尝试。由于您的块是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/

【讨论】：