1

我正在尝试将两个使用“display：inline-block;”的 div 居中。但每当我尝试时，它都不起作用。如果我删除 inline-block 类。它居中，但显示在页面下方而不是横跨页面。代码示例：

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

看起来像这样：

预习

4

3 回答 3

1

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

演示http://jsfiddle.net/kevinPHPkevin/nXj7c/

于 2013-08-06T18:07:22.910 回答
0

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

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

margin:0 auto;

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

于 2013-08-06T17:58:39.093 回答
0

你需要使用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元素指定宽度

于 2013-08-06T18:06:35.867 回答