CSS provides centering HTML elements. HTML elements can have different layouts by using CSS. In this tutorial, we will learn how to center text, image, text block elements of HTML with CSS.
Centering Lines Of Text
CSS provides the text-align
attributes where it will set the alignment of the text elements. center
value can be provided to this attribute to center text elements like below. In this example, we will center text elements like h2
and p
.
<html> <head> <style> h2 { text-align:center; } p { text-align:center; } </style> </head> <body> <h2>Caption</h2> <p>This is a centered text</p> <p>This is a centered text</p> <p>This is a centered text</p> <p>This is a centered text</p> <p>This is a centered text</p> <p>This is a centered text</p> <p>This is a centered text</p> </body> </html>

Centering a Block Of Text Or Image
In some cases, we may need to center not only the given text or letters, completely the block of the text. We can use the margin-left
and margin-right
attributes by specifying the width of the block. In this example, we will set the margin-left and margin-right attributes as auto and set the width to 12em which will set the body size of the text block.
<html> <head> <style> h2 { text-align:center; } p { margin-left: auto; margin-right: auto; width: 12em } </style> </head> <body> <h2>Caption</h2> <p>This is a centered text.This is a centered text.This is a centered text.This is a centered text.This is a centered text.This is a centered text.This is a centered text.This is a centered text.This is a centered text.This is a centered text.This is a centered text.This is a centered text.This is a centered text.This is a centered text.This is a centered text.This is a centered text.This is a centered text.This is a centered text.This is a centered text.This is a centered text.This is a centered text.This is a centered text.This is a centered text.This is a centered text.v</p> </body> </html>

Centering A Block or An Image Vertically
Up to now we have centered given text or image elements horizontally but we can also center vertically using vertical-align
CSS attribute. In this example, we will center given text vertically by providing the middle
as value to the vertical-align attribute.
<html> <head> <style> h2 { text-align:center; } div { margin-left: auto; margin-right: auto; width: 12em; vertical-align:middle; } </style> </head> <body> <DIV class="container"> <P>This small paragraph... </DIV> </body> </html>
Center An Image
We can also center an image by using margin-left
and margin-right
CSS attributes. We will provide auto
as value to the margin-left and margin-right.
<html> <head> <style> img { display: block; margin-left: auto; margin-right: auto; } </style> </head> <body> <h2>Center an Image</h2> <p>This text is normal text where there is no specific alingment about it.</p> <img src="paris.jpg" alt="Paris" style="width:40%"> </body> </html>

Centering Vertically using Padding
We can use the padding
attribute of the CSS in order to center the given text or image vertically.
<html> <head> <style> .center { padding: 70px 0; border: 3px solid blue; } </style> </head> <body> <h2>Center Vertically</h2> <p>We can use the padding property in order to center vertically</p> <div class="center"> <p>I am vertically centered.</p> </div> </body> </html>

Centering Vertically and Horizontally
We can also center the given text or image vertically and horizontally. We will use line-height
and vertical-align
attributes with different values.
<html> <head> <style> .center { line-height: 200px; height: 200px; border: 3px solid green; text-align: center; } .center p { line-height: 1.5; display: inline-block; vertical-align: middle; } </style> </head> <body> <h2>Centering</h2> <p>We can also center the given text or image vertically and horizontally. We will use line-heigh and vertical-align attributes with different values</p> <div class="center"> <p>I am vertically and horizontally centered.</p> </div> </body> </html>
