2

I've looked for the answer here and tried everything, but I can't find a solution that works for my case. So I've decided to ask:

I want to center horizontally the div "listapost" (contained in the div "heart", width 100%). "Listapost" contains a certain number of "post" divs, 2 or 3 per rows according to the total width of the screen. This is the 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;}

the HTML is something like this:

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

Even using "display: inline-block" and removing the float property of "post" the "listapost" div is not centered. Why?

phatejoker
  • 23
  • 5
  • 1
    You have to specify the `width` of `#listapost` explicitly to make auto margins to work. For instance: `#listapost{ width: 70%; margin:0 auto; }` – Hashem Qolami Oct 21 '14 at 10:20

3 Answers3

2

Initial Problem

You need to specify a width on your #listapost element, otherwise the width of that and your #heart elements are identical, and it's already in the middle.

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

A better solution

A better solution is to remove the float values on your #post items and instead give them an inline-block display, then you can simply set your #postalist element to have central 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>
James Donnelly
  • 126,410
  • 34
  • 208
  • 218
  • In addition, you might want to consider [removing the gap between inline-block elements](http://stackoverflow.com/questions/5078239/how-to-remove-the-space-between-inline-block-elements). – Hashem Qolami Oct 21 '14 at 10:26
  • Thanks a lot, the "better solution" have worked fine! – phatejoker Oct 21 '14 at 12:24
  • @phatejoker happy to help. :-) Could you please mark this as the accepted answer when you get the chance? Thanks! – James Donnelly Oct 21 '14 at 12:27
1

change css rule #listapost to

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

demo

DracSkywalker
  • 363
  • 4
  • 13
0

Add display: table; to #listapost like this:

DEMO

#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;
}
<div id="heart">
    <div id="listapost">
        <div id="post">stuff</div>
        <div id="post">stuff</div>
        <div id="post">stuff</div>
        ....
  </div>
</div>
Anonymous
  • 10,002
  • 3
  • 23
  • 39