Centering a horizontal div

Asked

Viewed 169 times

0

How to center a horizontal DIV without knowing the width of it.

Example:

Previous - 1, 2, 3, 4 - Next

css

  • already tried: margin: 0 auto; ?

  • This question has no relation to PHP.

  • I use the techniques listed in this article: http://css-tricks.com/centering-in-the-unknown/ They were very useful to me.

1 answer

2

A quick solution, as long as you don’t worry about semantics, would be to use the attribute display:table, instead of display:block in their Ivs, thus:

<div id="paginador-wrapper">
    <div id="paginador-container">
        <!-- aqui vai a saída do seu código... -->
    </div>
</div>

In CSS, just apply these styles:

#paginador-wrapper {
    display: table;
    width: 100%;
}
#paginador-container {
    display:table-cell;
    text-align:center;
    vertical-align:middle;
}

The display as table and table cell accepts centering in the same molds as a normal table. It’s not the most beautiful solution in the world, but it’s still much better than working with positions and fluctuations.

Observing: according to the w3scholls, the values "inline-table", "table", "table-caption", "table-Cell", "table-column", "table-column-group", "table-Row", and "table-Row-group" do not work on IE7 and earlier and IE8 must use "! DOCTYPE" in html.

  • Already known here at SO-PT, that w3schools is not a good reference to be used, as already discussed here at the finish line, then I recommend you review the use of reference to it, perhaps replacing it with a reference to the MDN, which is more accepted by the community and much more updated.

  • @Fernando, the reference to w3s is only about the restrictions of the values involved in my solution (which has nothing to do with w3s), specifically relating to browsers where they may not work. If there is any other information to the contrary, it will be a pleasure to edit the remark. Thank you for the link and the suggestion. I will read it right now.

Browser other questions tagged css

You are not signed in. Login or sign up in order to post.