Search code examples
csswidthblock

Display div as centered blocks without 100% width

I know it's a super-basic question, but I'm not able to find a solution. I have 2 div and I would like to display them as blocks (one below the other) without having 100% width. Here's my code.

HTML

<div id="container">
    <div class="test">one</div>
    <div class="test">two</div>
</div>

CSS

.test {
    display:inline-block;
    clear: both;
    border:1px solid;
}

#container {
    clear:both;
    text-align:center;
}

Unfortunately this answer doesn't fit to me, since I need to center blocks horizontally (so float cannot be applied in my case). Here's the fiddle. Thanks in advance.

Solution

  • to center them on top of each other without taking 100% width and still use margin:auto; use : display:table;

    .test {
display:table;
margin:auto;
border:solid;/* to see it */
}