Css 定心div-显示：内联块；

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

#新闻{
背景图片：url（'../img/news.png'）；
背景重复：无重复；
高度：152px；
宽度：320px；
显示：内联块；
}
#康博迪{
背景图片：url（'../img/conBody.png'）；
背景重复：无重复；
高度：260px；
宽度：321px；
保证金：0px自动0px自动；
文本对齐：右对齐；
显示：内联块；
填充：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>

看起来像这样：

---

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

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

margin:0自动

这是一个带有裸体演示的小提琴：
你应该将所有东西都包装在一个div中，并在中间显示它，而不是试图在中间单独显示每个div

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

margin:0自动

这是一个带有裸体演示的小提琴：
您需要使用
文本对齐
属性

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


A.
B
C
.新闻家长{
背景：#ccc；
文本对齐：居中；
}
.新闻{
宽度：20%；
显示：内联块；
背景:#666；
文本对齐：左对齐；
}

现场示例如下：

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

请记住：您需要为
div.news
元素指定宽度
您需要使用
文本对齐
属性

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


A.
B
C
.新闻家长{
背景：#ccc；
文本对齐：居中；
}
.新闻{
宽度：20%；
显示：内联块；
背景:#666；
文本对齐：左对齐；
}

现场示例如下：

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

请记住：您需要为
div.news
元素指定宽度
您可以在包装中包含所有内容。如果将包装器设置为
display:table然后，即使没有设置宽度，也可以跑步

演示
您可以在包装器中包含所有内容。如果将包装器设置为
display:table然后，即使没有设置宽度，也可以跑步

DEMO
我将首先创建一个容器div，并将该div中的所有其他内容设置为position:relative；或者像你有它显示：内联块；而且它应该是中心的。你应该避免在html页面上多次添加相同的ID标签。这就是CSS
classes
的优点。这里不需要定义它们的位置。我会首先创建一个容器div，并将该div中的所有其他内容都设置为position:relative；或者像你有它显示：内联块；而且它应该是中心的。你应该避免在html页面上多次添加相同的ID标签。这就是CSS
类的功能，不需要手动定义它们的位置。为什么向下投票？这是执行此操作的行业标准方法。OP需要在一行中居中放置多个“框”，而不是每行一个框。我想这就是原因。你没有抓住答案的重点。行中有多少框没有区别——这种方法可以很好地工作。它将所有内容集中在包装器中。我更新了答案中的提琴，以证明这一点。。。。是的，它把所有的盒子放在包装纸的中心，每行一个。即使经过更新，它也不是防弹的。请参阅链接，您只是更改了包装的宽度，而没有更改子包装的宽度。如果你把它们都改了，效果很好。老实说，这是达到预期效果的标准方法。为什么要投否决票？这是执行此操作的行业标准方法。OP需要在一行中居中放置多个“框”，而不是每行一个框。我想这就是原因。你没有抓住答案的重点。行中有多少框没有区别——这种方法可以很好地工作。它将所有内容集中在包装器中。我更新了答案中的提琴，以证明这一点。。。。是的，它把所有的盒子放在包装纸的中心，每行一个。即使经过更新，它也不是防弹的。请参阅链接，您只是更改了包装的宽度，而没有更改子包装的宽度。如果你把它们都改了，效果很好。老实说，这是实现所需结果的标准方法。在本例中，您将以包装而不是内部元素为中心。工作，但似乎'黑客'对我来说…有没有什么错的中心包装-这是一个很好的解决方案。它实际上与我的相同，添加了
display:table
以替换
width:500px
这不是一个黑客行为，这是一种常见的做法。在本例中，您是将包装器而不是内部元素居中。工作，但似乎'黑客'对我来说…有没有什么错的中心包装-这是一个很好的解决方案。它实际上和我的一样，添加了
display:table
以替换
width:500px
这不是一个黑客行为，这是一种常见的做法。
text align
用于对齐文本。如果可能的话，不应将其用于布局，因为它会引起连锁问题。例如，将其添加到高级块元素意味着您必须使用
text align:left
text align
在每个子元素上撤消它，因为
text align
用于对齐文本。如果可能的话，不应将其用于布局，因为它会引起连锁问题。例如，将其添加到高级别