Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to align block elements to the center?
The margin property in CSS can be used to centre a block element like a div horizontally. We can set the width of the element, so that, it prevents the container from stretching out. The block elements take the full space line which force other elements to take up the next line as the block elements have 100% of the container.
Aligning the block elements to the center
Any element that begins a new line on a web page is considered as a block-level element. For example, header tags, div, etc.
These block elements take the full width of the webpage. Let’s say we have an element on our webpage, which takes only 10% of the webpage, but if it’s a block element then, it will take 100% of the width itself.
We can change the display property of any particular element by setting the value to block property.
Syntax
Let’s look at the syntax for the display property −
display: value;
The above is the syntax for the display property which can be used to define the look of a particular element on a webpage.
The margin property
Now that we know the behaviour of the block element, we will be using the margin property to align the elements in the horizontal plane.
The margin property will control the position of the block element. We will use the property in such a way that it centres the element, as the margin can control the element in horizontal as well as vertical plane.
Syntax
Let’s look at the syntax of the margin property −
margin: value;
Given here is the syntax for the margin property, and the margin should be specified from left and right so that the block element gets centred. The auto value can be used to set the margin so that the block element can be aligned to the center automatically.
Note − There is a property text-align and its value center. This property cannot be used on this approach because this is used to center non-block elements like paragraph, span tags and more.
Example
To better understand the functionality of the property, let’s look into an example, in this, we have added some headings and a div whose margin was set to auto in the CSS properties section and then cantered them along with two inline blocks. The different colours of the div tells us about the different displays like the inline block and others.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Example of text alignment to the center</title>
<style>
*{
background-color:black;
}
.para {
color:white;
text-align: center;
}
.testinline {
padding: 10px;
border: 2px solid blue;
}
h1 {
font-size: 35px;
color: white;
width: fit-content;
margin: auto;
}
.container {
background-color: lightblue;
margin: auto;
border: solid red 1px;
padding: 15px 10px;
text-align: center;
width: fit-content;
}
.good-night {
padding: 10px;
border: 2px solid blue;
color: white;
display: inline-block;
}
.good-morning {
padding: 10px;
text-align: center;
color: white;
}
</style>
</head>
<body>
<h1>Hi, this an example</h1>
<p class="para">We are aligning the block elements to the text.</p>
<h1>Welcome</h1>
<div class="container">
How is your day Going
</div>
<div class="good-morning">
<div style="display: inline-block" class="testinline">
Good Morning
</div>
<div style="display: inline-block" class="testinline">
Good Night
</div>
</div>
</body>
</html>
In the above output, you can see that the heading, and div elements are cantered along with the paragraph tags. We aligned the paragraph tags to the centre by using the text-align property and aligned the block elements by using the margin property and by setting its value to auto.
Example
In the below program, we will take an image, and a non-block element which comes next to image. We then set the display of the image to block and its margin to auto and then align it to centre along with the header and also set the paragraph’s display property to inline-block.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Example for text alignment </title>
<style>
h1 {
margin: auto;
width: 30%;
font-size: 24px;
margin-bottom: 8px;
background-color: black;
color: white;
}
.image{
display: block;
margin: auto;
}
</style>
</head>
<body>
<h1>
Example for setting the block element
</h1>
<img class="image" src="https://www.tutorialspoint.com/images/logo.png">
<p style="display: inline-block;">
Hi this is another example for aligning the block element to the centre.
</p>
</body>
</html>
In the output, you can see that the image is in centre and the text is in the next line just as we wanted.
Conclusion
Aligning block elements to the center is a great way to create a balanced and symmetrical layout. By using either the text-align or margin auto values, you can quickly and easily align any number of elements in your design. With some practice, you'll be able to use these techniques with confidence!
4K+ Views
