Today, I came across the problem of having to center a div block on a web page without having all its content being centered. I thought of using text-align: center; but then all the div inner elements would have inherited that style, and that is not what I wanted. I wanter the text inside the div block to be justified to the left.

I did some researching on the web, and I found the following solution: Specify the width of the div block and set its left and right margins to auto. For example:

<div style=”width: 500px; margin-left: auto; margin-right: auto;”> … </div>

Of course, all this should be done with a style-sheet, but for the sake of simplicity in the example, I specified the style inline.

Posted in CSS