Home/ Questions/Q 994961
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-16T06:38:54+00:00

I want to center divs, something like: <div style=’width:100%;’> <div style=’float:left; width=40px; height=40px;’></div> <div

  • 0

I want to center divs, something like:

<div style='width:100%;'>

    <div style='float:left; width=40px; height=40px;'></div>
    <div style='float:left; width=40px; height=40px;'></div>
    <div style='float:left; width=40px; height=40px;'></div>
    ...

</div>

While I want the child divs to be floated so they appear on the same row, I’d like them to be centered within the row horizontally. As more divs are added, they might need to eventually wrap onto another line, which is fine. But I’d like those items to be centered too. Something like:

|                    |
|  X  X  X  X  X  X  |
|        X  X        |

so in the above, enough child divs were added that the first line is completely full, then the two additional ones wrap onto another line but get centered themselves too.

What’s the right style to apply here?

Thanks

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Try setting the top div (the one with width:100%;) to have text-align:center; then give each div a display:inline-block; and margin:auto;

    This will work in chrome, opera, FF but not explorer.

    IE only support inline-block for inline items, so to make it work in IE make the internal divs spans,

    like this

    <div style="width:100%;text-align:center;">
    <span style="margin:auto;background-color:red;width:100px;height:50px;display:inline-block;margin-bottom:5px;">&nbsp;</span>
    <span style="margin:auto;background-color:red;width:100px;height:50px;display:inline-block;margin-bottom:5px;">&nbsp;</span>
    <span style="margin:auto;background-color:red;width:100px;height:50px;display:inline-block;margin-bottom:5px;">&nbsp;</span>
    <span style="margin:auto;background-color:red;width:100px;height:50px;display:inline-block;margin-bottom:5px;">&nbsp;</span>
    <span style="margin:auto;background-color:red;width:100px;height:50px;display:inline-block;margin-bottom:5px;">&nbsp;</span>
    <span style="margin:auto;background-color:red;width:100px;height:50px;display:inline-block;margin-bottom:5px;">&nbsp;</span>
    <span style="margin:auto;background-color:red;width:100px;height:50px;display:inline-block;margin-bottom:5px;">&nbsp;</span>
    <span style="margin:auto;background-color:red;width:100px;height:50px;display:inline-block;margin-bottom:5px;">&nbsp;</span>
</div>
    • 0