How to align block elements to center using CSS ?
Last Updated :
06 Mar, 2024
The “blocks” are known for taking full line space, forcing other elements to start on a new line. In other words, they have a width of 100% of the webpage or container holding the block. Â In this article, we are going to see how to block elements that usually behave and how to center them using CSS.
Block Elements Behaviour
Any element can be set to behave like a block by setting its display property to the block “display: block”. There are some other elements like headers, and div tags which are by default blocks. So they take the full line or full width of the web page or container holding it. Even if our content is taking 20% of the width of the webpage still the block property will reserve the full 100% width of the web page or container holding it.
How to center block elements
To center block elements, we primarily rely on the `margin` property. Since block elements span the full width of their container, we adjust their margins to position them horizontally and vertically. Notably, the `text-align: center` property doesn’t center block elements; it only affects non-block or inline-block elements.
Examples of aligning block elements to center using CSS
1. Center block elements using margin property:
We need to specify the margin from left and right such that it looks centered. We do not need to do this manually, we have one property value “auto” which will automatically set the margin such that our block element is placed in the center. Use the below CSS property to center your block element.
margin: auto
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<style>
h2,
p {
text-align: center;
}
.myblock {
margin: auto;
border: 2px solid red;
width: fit-content;
padding: 15px;
text-align: center;
background-color: lightyellow;
}
header {
font-size: 40px;
background-color: lightgreen;
margin: auto;
width: fit-content;
}
.myinline {
padding: 10px;
border: 2px solid blue;
}
.holder {
text-align: center;
}
</style>
</head>
<body>
<header>hello</header>
<div class="myblock">
div who has default display : block
</div>
<div class="holder">
<div style="display: inline-block" class="myinline">
inline block paragraph 1
</div>
<div style="display: inline-block" class="myinline">
inline block paragraph 2
</div>
</div>
</body>
</html>
|
Output:
Center block elements using margin property
2. Centering Element Using display block Property:
We have one image that has some space around it, so by default the non-block element will come next to the img tag and not on the next line. After setting the “display: block” property, we can make our image to block element. It can be centered using “margin: auto” property.
Note: The body tag has been set to the “text-align: center” property. We know that it is not affecting the block elements.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<style>
header {
font-size: 20px;
margin: auto;
width: 30%;
background-color: lightgreen;
margin-bottom: 10px;
}
p {
display: inline-block;
}
img {
display: block;
margin: auto;
}
</style>
</head>
<body>
<header>
centering image using display: block
</header>
<img src=
alt="image here" width="500" height="400" />
<p>
paragraph came to the new line even
if it is inline, because the img is
set to block
</p>
</body>
</html>
|
Output:
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...