Home >Web Front-end >CSS Tutorial >How to center align a block element?
How to center align a block element?
- WBOYforward
- 2023-09-05 18:13:021309browse
The margin property in CSS can be used to center block elements (such as divs) horizontally. We can set the width of the element, which prevents the container from stretching. The block element occupies a full line of space, which forces other elements to occupy the next line because the block element owns 100% of the container.
Center align block elements
Any element on a web page that starts a new line is considered a block-level element. For example, title tag, div, etc.
These block elements occupy the entire width of the web page. Let's say we have an element on our web page that takes up only 10% of the web page, but if it were a block element then it would take up 100% of the width itself.
We can change the display attribute of any specific element by setting the value to the block attribute.
Syntax
Let’s look at the display properties -
display: value;
The above is the syntax of the display attribute, which can be used to define the appearance of specific elements on a web page.
Margin properties
Now that we know how the block element behaves, we will use the margin property to align the element horizontally.
The margin attribute will control the position of the block element. We'll use this property in a way that the element is centered, since margins control the element in both the horizontal and vertical planes.
grammar
Let’s look at the syntax of the margin attribute -
margin: value;
Given here is the syntax of the margin attribute, and the margins should be specified from left to right so that the block element is centered. The auto value can be used to set margins so that block elements are automatically centered.
NOTE - There is an attribute text-align and its value center. This property cannot be used with this method because it is used to center non-block elements such as paragraphs, span tags, etc.
Example
To better understand what this property does, let's look at an example where we add some headers and a div with margins set to auto in the CSS properties section and then combine them with two inline blocks are moved together. Different colors of divs tell us about different displays, such as inline blocks, etc.
<!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 output above, you can see that the title and div elements are rotated along with the paragraph tags. We use the text-align property to align the paragraph tag to the center and the margin property to align the block element with its value set to auto.
Example
In the following program, we will get an image and a non-block element next to the image. We then set the image's display to block, set its margins to automatic, then align it to the center with the title, and 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" alt="How to center align a block element?" >
<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 the center and the text is on the next line, just like we want.
in conclusion
Aligning block elements to the center is a great way to create a balanced and symmetrical layout. You can quickly and easily align any number of elements in your design by using text alignment or margin automatic values. With a little practice, you'll be able to use these techniques with confidence!
The above is the detailed content of How to center align a block element?. For more information, please follow other related articles on the PHP Chinese website!