CSS: Align Center — Center Align Texts or Images in HTML and CSS

• Tweet

• Tweet

There used to be an HTML way to center align things such as texts, images or other contained elements. For the sake of semantic markup, let’s forget about it from here.

CSS is the only correct way to align things such as texts and images center now. To center align a paragraph or an image, use the CSS rule text-align:

p {text-align:center;}

You need to change the selector p in this case to fit your own situation. For instance, to center align a poem or a lyric in a div with class="piece":

div.piece {text-align:center;}

With text-align:center, all things inside div.piece is center aligned including all texts, images or more div elements and things in them. It’s a automatically inherited CSS style rule.

Know how to left align or right align in CSS.