CENTERING ITEMS IN HTML THE CORRECT WAY

HTML Basics for Beginners - Tutorial on centring items

by Ellie M

HTML

<h2>Text and Paragraphs</h2>

<p>This text is centered.</p>

<p class="centeritem">This text is centered.</p>

<h2>Blocks Centered</h2>

<div class="centeritem">This block is centered, but the text inside it is left aligned.</div>

<h2>Images Centered</h2>

<img src="http://placehold.it/100x100" alt="image" class="centeritem" />

<h2>DIVs Centered</h2>

<div id="centreitem">

Thing you want centred

</div>

CSS

p { text-align: center; background: #f0f0f0;}

p.centeritem { text-align: center; background: #f0f0f0;}

div.centeritem { margin-left: auto; margin-right: auto; width: 100px; background: #f0f0f0;}

img.centeritem { display: block; margin-left: auto; margin-right: auto; background: #f0f0f0;}

#centreitem {width: 100px; margin: 0 auto; background: #f0f0f0;}