如何在另一个中对齐多个div？答案

【问题标题】：How to align multiple divs in another?如何在另一个中对齐多个div？
【发布时间】：2014-03-11 23:32:42
【问题描述】：

这是我的 HTML：

...
<div class="header">
<div class="left">
</div>
<div class="center">
<img class="logo" src="linktomyimage.com/image.png" />
</div>
<div class="right">
</div>
</div>

<!-- And the desired result is: -->
[ [LEFT] [CENTER] [RIGHT] ]

我唯一的 CSS 是：

* {
margin: 0px;
}
img.logo {
display: block;   margin-left: auto;   margin-right: auto; 
}

我真的需要帮助来对齐整个页面上的三个 div。此外 div.center 必须与图像具有相同的大小，即宽度 - 800 像素和高度 - 600 像素。

【问题讨论】：

显示左、中、右类的 CSS 代码
使用display: inline-block兄弟！

标签： css html alignment

【解决方案1】：

在我看来，它更像是一张表格，而不是分区...

<table class="header"><tr>
    <td class="left"></td>
    <td class="center">
        <img class="logo" src="linktomyimage.com/image.png" />
    </td>
    <td class="right"></td>
</tr></table>

以后再考虑so CSS：

table.header{
    width: 100%;
    border-collapse: collapse;
}

table.header td{
    vertical-align: top;
    border: 1px solid #404040;
}

table.header td.center{
    width: 800px;
    height: 600px;
}

这只是一个代码示例，得到思路，适应自己的需要^^

【讨论】：

您的代码有效，但请看一下：gameplay-universe.uphero.com/test.html 表格之间有空格。有什么建议吗？
为单元格添加边框，颜色与您的灰色框架相同：#404040。这将“填补空白”。答案已编辑。
似乎不起作用。再看网页。还有什么办法吗？
一种肮脏的方式是将padding: -1px;添加到table.header td。

【解决方案2】：

将这些类添加到您的 CSS 中

.left
{
 display:inline-block;
 width:25%;
}
.center
{
 display:inline-block;
 width:50%;
}
.right
{
 display:inline-block;
 width:25%;
}

【讨论】：

添加这个类 .center img{width:100%;}

【解决方案3】：

使用以下标记，我想到了 2 个解决方案：

标记

<div class="header">
    <div class="left">
        Some left test
    </div>
    <div class="center">
    <img class="logo" src="http://placehold.it/50x50" />
    </div>
    <div class="right">
        Some right text
    </div>
</div>

解决方案 #1

左右浮动并在中心使用显示块

FIDDLE

CSS

.header
{
    text-align: center;
    width:100%;
}
.left
{
    float:left
}
.right
{
    float:right;
}
.center
{
    display:inline-block;
}

解决方案 #2

在标题元素上使用text-align: justify;。

然后将内容拉伸到 100% 宽度

FIDDLE

CSS

.header
{
    text-align: justify;
    width:100%;
}
.header > div
{
    display: inline-block;
}
.header:after {
    content: '';
    display: inline-block;
    width: 100%;
}

【讨论】：

【解决方案4】：

.left, .centre, .right {
float:left;
}

float:left 所做的是，它会让每个容器从左边组织起来，所以你得到：

[左]-[中]-[右]

【讨论】：