HTML Guide: Center a Element horizontally

How to center an image, a text or other elements horizontally using HTML and CSS?

Problem:
I want to center an image horizontally on my webpage. How can I achieve this by using HTML and CSS?

<div id=”divWithId1>
<div id=”divWithId2>
<img src=”imageToCenter.jpg” width=”640″ height=”256″>
</div>
</div>

Answer:
Just apply the following CSS-Code to “divWithId2” and the image will be centered horizontally. The width isnt that important, use what ever you like. In general is “margin: 0 auto” doing all the magic.

#divWithId2 {
width: 60%;
margin: 0 auto;
}


More about HTML


W3Schools


back