Centering HTML Elements with CSS
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 h2and p.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<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 Lines Of Text
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<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 Of Text Or Image
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<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> |
Center An Image
Centering Vertically using Padding
We can use the padding attribute of the CSS in order to center the given text or image vertically.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<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
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
<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> |
Centering Vertically and Horizontally
