How to Center anything with CSS – Text, Image, Elements and more
Centering elements is one of the trickiest aspects of Cascading Style Sheets (CSS) in part because there are many different ways to centralize elements in CSS.
Modifying the CSS
There are different types of centering and you can modify everything from the div, text, blocks, and images in CSS to centralize your elements.
So how do you choose which way to use?
It depends on the HTML element you’re trying to center. Center alignment means placing an element at the horizontal and vertical center of its parent. This implies the following two classes:
- Center class: shows the element that is to be center aligned
- Parent class: shows the parent element of a center class
The Challenge:
A notoriously difficult task in CSS is centering elements in the GUI. There are different types of centering depending on each use case.
One of the most common things you need to do in CSS is center align your text and images.
The following are different kinds of centering:
- Centering lines for text
- Centering a block of text or an image
- Centering a block or an image vertically
- Center alignment of elements
- Vertical centering – Using padding
- Vertical centering – Using line-height
- Left and right Alignment – Using position
Centering lines for text
Text centering is done in a paragraph or within a heading. CSS uses its ‘text-align’ property for that:
Paragraph {
text-align: center;
}
Heading {
text-align: center;
}
The output looks like this:
---------------------------------------------------------------------------| This is a sample line in the paragraph centered between the paragraph's | | margins, using the CSS property 'text-align' and setting its value to | | center. |
---------------------------------------------------------------------------
Centering a block or an image
If you need to center the entire block or an image as a whole you can set the margin values to auto. This is when you want the left and right margins to be equal. It could be done with a block of fixed width and since the block itself is flexible, it will take up all the available width of the page.
For Example:
P.blocktext {
margin-left: auto;
margin-right: auto;
width: 5cm;
}
... <P class="blocktext" >;
This is a center-aligned text. Here, you need to notice that the lines inside the block are left-aligned. The output will look like this:
---------------------------------------------------------------------------| This is a center-aligned text. |
| Here, you need to notice that the |
| lines inside the block are left-aligned | | | ---------------------------------------------------------------------------
To center the text inside an element, use text-align: center;
If you want to centralize an image and make a block of its own, you can apply the margin properties to it.
For Example:
IMG.displayed {
display: block;
margin-left: auto;
margin-right: auto;
}
... <IMG class="displayed" src="..." alt="..." >;
The output will look like this:
--------------------------------------------------------------------------- The output image is centered:
---------------------------------------------------------------------------
Centering a block or an image vertically
You can use a few properties to center the blocks vertically. Specify the outer block that needs to be formatted as a table cell because you will centralize all the contents of your table cell.
To centralize your paragraph inside a block with a given height you can check out the following example:
For Example:
DIV.container {
min-height: 8 cm;
display: table-cell;
vertical-align: middle;
}
...
<DIV
class="container"
> <P
> This
sample
paragraph
is
centered
vertically
</DIV
>;
The output will look like this:
--------------------------------------------------------------------------- | |
| This sample paragraph is centered vertically. | |
---------------------------------------------------------------------------
Center alignment of elements
To horizontally center elements like div, you can allow the browser to auto calculate the margin. For autoscaling, you can set the value margin: auto; In order to prevent the width of the element from stretching out, you need to set up a specific width.
For Example:
.center {
margin: auto;
width: 20%;
border: 2px black;
padding: 10px;
}
The output will look like this:
--------------------------------------------------------------------------- | |
| The required <div> element is centered | |
---------------------------------------------------------------------------
Vertical centering – Using padding
To add spaces around an element’s content, padding is used to create space with defined borders. You can center an element vertically in CSS using the top and bottom padding values.
For Example:
.center {
padding: 50px 0;
border: 2px solid black;
}
The output looks like this:
---------------------------------------------------------------------------| |
| This sample paragraph is centered vertically using padding | |
---------------------------------------------------------------------------
You can center the text vertically and horizontally by using padding and text-align: center:
.center {
padding: 50px 0;
border: 2px solid black;
text-align: center;
}
The output will look like this:
--------------------------------------------------------------------------- | |
| This sample paragraph is vertically and horizontally centered | |
---------------------------------------------------------------------------
Vertical centering – Using line-height
You can use the line-height property with a value of height property.
For Example:
.center {
line-height: 100px;
height: 100px;
border: 2px black;
text-align: center;
}
The output will look like this:
--------------------------------------------------------------------------- | |
| This sample paragraph is vertically and horizontally centered | |
---------------------------------------------------------------------------
Left and right Alignment – Using position
To align all elements, you can use position: absolute;: It will position the element absolutely to its first positioned parent.
For Example:
.right {
position: absolute;
right: 0px;
width: 200px;
border: 2px solid #000000;
padding: 8px;
}
The output will look like this:
-------------------------------------| This sample is right aligned | | -------------------------------------
That’s everything you need to know to center the elements in CSS. Now it’s your turn! If you are curious about more things related to CSS, check out our bite-sized lessons on the topic.
Centering elements is one of the trickiest aspects of Cascading Style Sheets (CSS) in part because there are many different ways to centralize elements in CSS.
Modifying the CSS
There are different types of centering and you can modify everything from the div, text, blocks, and images in CSS to centralize your elements.
So how do you choose which way to use?
It depends on the HTML element you’re trying to center. Center alignment means placing an element at the horizontal and vertical center of its parent. This implies the following two classes:
- Center class: shows the element that is to be center aligned
- Parent class: shows the parent element of a center class
The Challenge:
A notoriously difficult task in CSS is centering elements in the GUI. There are different types of centering depending on each use case.
One of the most common things you need to do in CSS is center align your text and images.
The following are different kinds of centering:
- Centering lines for text
- Centering a block of text or an image
- Centering a block or an image vertically
- Center alignment of elements
- Vertical centering – Using padding
- Vertical centering – Using line-height
- Left and right Alignment – Using position
Centering lines for text
Text centering is done in a paragraph or within a heading. CSS uses its ‘text-align’ property for that:
Paragraph {
text-align: center;
}
Heading {
text-align: center;
}
The output looks like this:
---------------------------------------------------------------------------| This is a sample line in the paragraph centered between the paragraph's | | margins, using the CSS property 'text-align' and setting its value to | | center. | ---------------------------------------------------------------------------
Centering a block or an image
If you need to center the entire block or an image as a whole you can set the margin values to auto. This is when you want the left and right margins to be equal. It could be done with a block of fixed width and since the block itself is flexible, it will take up all the available width of the page.
For Example:
P.blocktext {
margin-left: auto;
margin-right: auto;
width: 5cm;
}
... <P class="blocktext" >;
This is a center-aligned text. Here, you need to notice that the lines inside the block are left-aligned. The output will look like this:
---------------------------------------------------------------------------| This is a center-aligned text. | | Here, you need to notice that the | | lines inside the block are left-aligned | | | ---------------------------------------------------------------------------
To center the text inside an element, use text-align: center;
If you want to centralize an image and make a block of its own, you can apply the margin properties to it.
For Example:
IMG.displayed {
display: block;
margin-left: auto;
margin-right: auto;
}
... <IMG class="displayed" src="..." alt="..." >;
The output will look like this:
--------------------------------------------------------------------------- The output image is centered:
---------------------------------------------------------------------------
Centering a block or an image vertically
You can use a few properties to center the blocks vertically. Specify the outer block that needs to be formatted as a table cell because you will centralize all the contents of your table cell.
To centralize your paragraph inside a block with a given height you can check out the following example:
For Example:
DIV.container {
min-height: 8 cm;
display: table-cell;
vertical-align: middle;
}
...
<DIV
class="container"
> <P
> This
sample
paragraph
is
centered
vertically
</DIV
>;
The output will look like this:
--------------------------------------------------------------------------- | | | This sample paragraph is centered vertically. | | ---------------------------------------------------------------------------
Center alignment of elements
To horizontally center elements like div, you can allow the browser to auto calculate the margin. For autoscaling, you can set the value margin: auto; In order to prevent the width of the element from stretching out, you need to set up a specific width.
For Example:
.center {
margin: auto;
width: 20%;
border: 2px black;
padding: 10px;
}
The output will look like this:
--------------------------------------------------------------------------- | | | The required <div> element is centered | | ---------------------------------------------------------------------------
Vertical centering – Using padding
To add spaces around an element’s content, padding is used to create space with defined borders. You can center an element vertically in CSS using the top and bottom padding values.
For Example:
.center {
padding: 50px 0;
border: 2px solid black;
}
The output looks like this:
---------------------------------------------------------------------------| | | This sample paragraph is centered vertically using padding | | ---------------------------------------------------------------------------
You can center the text vertically and horizontally by using padding and text-align: center:
.center {
padding: 50px 0;
border: 2px solid black;
text-align: center;
}
The output will look like this:
--------------------------------------------------------------------------- | | | This sample paragraph is vertically and horizontally centered | | ---------------------------------------------------------------------------
Vertical centering – Using line-height
You can use the line-height property with a value of height property.
For Example:
.center {
line-height: 100px;
height: 100px;
border: 2px black;
text-align: center;
}
The output will look like this:
--------------------------------------------------------------------------- | | | This sample paragraph is vertically and horizontally centered | | ---------------------------------------------------------------------------
Left and right Alignment – Using position
To align all elements, you can use position: absolute;: It will position the element absolutely to its first positioned parent.
For Example:
.right {
position: absolute;
right: 0px;
width: 200px;
border: 2px solid #000000;
padding: 8px;
}
The output will look like this:
-------------------------------------| This sample is right aligned | | -------------------------------------
That’s everything you need to know to center the elements in CSS. Now it’s your turn! If you are curious about more things related to CSS, check out our bite-sized lessons on the topic.
