居中div - 显示：内联块;

Question

我正试图将两个使用“display：inline-block;”的div居中。但每当我尝试时，它都无法正常工作。如果我删除内联块类。它会居中但显示在页面下方而不是在页面上。代码示例：

#news {
    background-image: url('../img/news.png');
    background-repeat: no-repeat;
    height: 152px;
    width: 320px;
    display: inline-block;
}
#conBody {
    background-image: url('../img/conBody.png');
    background-repeat: no-repeat;
    height: 260px;
    width: 321px;
    margin: 0px auto 0px auto;
    text-align: right;
    display: inline-block;
    padding: 0px;
}

HTML：

<div id="conBody">

</div>
<div id="conBody">

</div>
<div id="conBody">

</div>
<div id="news">

</div>
<div id="news">

</div>
<div id="news">

</div>

看起来像这样：

Answer 1

您可以在包装器中包含所有内容。如果您将包装器设置为display: table;，那么即使您没有设置宽度，也可以加宽包装。

DEMO http://jsfiddle.net/kevinPHPkevin/nXj7c/

Answer 2

您应该将所有内容包装在div中并在中心显示 it ，而不是尝试显示 每个 在中心单独划分。

您可以使用CSS将块元素居中：

margin:0 auto;

这是一个使用准系统演示的小提琴：http://jsfiddle.net/nRAyQ/3/

Answer 3

您需要使用text-align属性。

<div class="news-parent">
    <div class="news">
    a
    </div>
    <div class="news">
    b
    </div>
    <div class="news">
    c
    </div>
</div>

.news-parent{
    background: #ccc;
    text-align: center;
}
.news {
    width: 20%;
    display: inline-block;
    background: #666;
    text-align: left;
}

此处的实例：http://jsfiddle.net/7KFNR/

建议：不使用ID（#news） - ID是唯一标识符。简单地说：一个ID只能在单页上找到一次。使用适用于多个元素的规则的类。

请记住：您需要指定div.news元素的宽度