margin：0即使使用display：block也无法工作

Question

我在这里寻找答案并尝试了所有方法，但我无法找到适合我案例的解决方案。所以我决定问：

我想横向居中div＆＃34; listapost＆＃34; （包含在div＆＃34; heart＆＃34 ;,宽度100％）。 ＆＃34; Listapost＆＃34;包含一定数量的＆＃34; post＆＃34;根据屏幕的总宽度，每行2个或3个div。这是css：

#heart{width:100%}

#post{
width:50px;
float:left;
text-align:left;
padding:5px;
margin:1px;
font-family:Verdana, Geneva, sans-serif;
font-size:12px;
color:#605f5f;
background-color:#f7f6f6;
}

#listapost{margin:0 auto;}

HTML是这样的：

<div id="heart">
     <div id="listapost">
       <div id="post">stuff</div>
       <div id="post">stuff</div>
       <div id="post">stuff</div>
       ....
     </div>
</div>

即使使用＆＃34;显示：inline-block＆＃34;并删除＆＃34; post＆＃34;的浮动属性＆＃34; listapost＆＃34; div不居中。为什么呢？

Answer 1

初始问题

您需要在width元素上指定#listapost，否则该元素和#heart元素的宽度相同，并且已经位于中间位置。

#heart{width:100%}

#post{
width:50px;
float:left;
text-align:left;
padding:5px;
margin:1px;
font-family:Verdana, Geneva, sans-serif;
font-size:12px;
color:#605f5f;
background-color:#f7f6f6;
}

#listapost{margin:0 auto; width: 220px;}

<div id="heart">
     <div id="listapost">
       <div id="post">stuff</div>
       <div id="post">stuff</div>
       <div id="post">stuff</div>
       ....
     </div>
</div>

更好的解决方案

更好的解决方案是删除float项上的#post值，然后为其显示inline-block，然后您只需将#postalist元素设置为中央text-align。

#heart{width:100%}

#post{
width:50px;
display: inline-block;
text-align:left;
padding:5px;
margin:1px;
font-family:Verdana, Geneva, sans-serif;
font-size:12px;
color:#605f5f;
background-color:#f7f6f6;
}

#listapost{text-align: center;}

<div id="heart">
     <div id="listapost">
       <div id="post">stuff</div>
       <div id="post">stuff</div>
       <div id="post">stuff</div>
       ....
     </div>
</div>

Answer 2

将css规则#listapost更改为

#listapost{
 display:table;
 margin:0px auto;}

demo

Answer 3

将display: table;添加到#listapost，如下所示：

DEMO

＆＃13;

＆＃13;

#heart {
    width:100%
}
#post {
    width:50px;
    float:left;
    text-align:left;
    padding:5px;
    margin:1px;
    font-family:Verdana, Geneva, sans-serif;
    font-size:12px;
    color:#605f5f;
    background-color:#f7f6f6;
}
#listapost {
    display: table;
    margin:0 auto;
}

＆＃13;

<div id="heart">
    <div id="listapost">
        <div id="post">stuff</div>
        <div id="post">stuff</div>
        <div id="post">stuff</div>
        ....
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;