Question

I want to center a div, so I write <div style="padding-left: 50%;">
test
</div>. The text is centered just fine until I resize the browser to a very small size. (~300 px width). Then it starts to display a horizontal scrollbar.

Why do browsers (Chrome12, Opera11.50, Firefox5) implement that behaviour? In my mind that is simply not correct. There is no content that would need a scrollbar. How do I disable it or what else should I do to center my content?

Answer 1

If you want to center text use text-align:center. If you want to center an element use margin:0 auto. Please provide more details about exactly what you wish to accomplish.

You can prevent the appearance of the scrollbar by modifying the overflow property.