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 block elements can be centered using CSS?
Positioning your elements, such as buttons, content boxes, text, and images, is what alignment is all about. Aligning anything in web design is lining up the parts correctly or in a straight line. In certain web design strategies, alignment is deliberately broken to produce an asymmetrical design. On the other hand, the components will all be aligned in some way.
The layout of the web page is specified in large part by the positions of the elements. A presentable website is one that has elements that are strategically placed and wellorganized. The CSS position attribute will make this process simpler for you. It aids in the creation of various website layouts. Your website will be easier to read if the parts are properly aligned. The right alignment of objects and information has a significant influence on the overall appearance of your website. Your website's meticulous alignment of elements, including text blocks and photo placeholders, exudes professionalism and is also aesthetically pleasant and tranquil.
A crucial component of responsive design is the alignment of the items on your website. This is because the appearance and structure of the website will change to what you had intended when it is loaded from a device with a smaller screen size, like a smart phone.. In this article, we will discuss about how to align the block elements using CSS.
What are block elements?
Block elements are those that are displayed at the start of a new line. A block element takes up the entire width of the content it is part of. Unlike inline, these elements have a top and bottom margin. Only the body tag is permitted to contain components at the block level. In comparison to inline components, block-level elements produce a larger structure. Examples of block elements are <div>, <article>, <section>, <li>, <ul>, <form>, <p>, etc.,
Example
<!DOCTYPE html>
<html>
<head>
<title> Block Elements </title>
<style>
*{
margin: 11px;
padding: 5px;
letter-spacing: 1px;
}
h1{
color: green;
text-decoration: underline;
}
div{
background-color: #FFFF00;
width: 30%;
}
p{
background-color: #FF0000;
width: 30%;
}
article{
background-color: #00FF00;
width: 30%;
}
section{
background-color: blue;
width: 30%;
}
</style>
</head>
<body>
<h2> Block Elements </h2>
<div> This is a div element. </div>
<p> This is a p element. </p>
<article> This is an article element. </article>
<section> This is a section element. </section>
</body>
</html>
Methods to centrally align the Block-level elements
Some of the methods to centrally align the block elements are discussed below.
Method 1
Specify the width of the element manually. This is because the default width of block elements is 100% of the whole screen. Then, specify the margin for aligning the remaining space around the block element.
Example
<!DOCTYPE html>
<html>
<head>
<title> Alignment of Block elements </title>
<style>
*{
margin: 11px;
padding: 5px;
box-sizing: border-box;
}
body {
background: cyan;
}
.container {
background: #000000;
color: #FFFFFF;
text-align: center;
width: 350px;
margin: 10rem auto;
}
</style>
</head>
<body>
<h1> Tutorialspoint </h1>
<h2> Block Elements </h2>
<div class= "container">
<h3> This is a div element which is centrally aligned. </h3>
</div>
</body>
</html>
Example
<!DOCTYPE html>
<html>
<head>
<title> Alignment of Block elements </title>
<style>
*{
margin: 11px;
padding: 2px;
box-sizing: border-box;
}
body {
background: #FFFF00;
}
.box {
background: #040220;
color: rgb(238, 238, 238);
text-align: center;
width: 480px;
height: 30px;
margin: 10px auto;
}
</style>
</head>
<body>
<h1> Tutorialspoint </h1>
<h2> Block Elements </h2>
<div class= "box">
<h3> This is an example. </h3>
</div>
<div class= "box">
<h3> This is an example. </h3>
</div>
</body>
</html>
Method 2
To centrally align the block elements, we can simply make use of the <center> tag. All the elements within the <center> tag will be centrally aligned.
Example
<!DOCTYPE html>
<html>
<head>
<title> Alignment of Block elements </title>
<style>
*{
margin: 11px;
padding: 5px;
box-sizing: border-box;
}
body {
background: cyan;
}
.container {
background: #000000;
color: #FFFFFF;
text-align: center;
width: 60%;
}
</style>
</head>
<body>
<h1> Tutorialspoint </h1>
<h2> Block Elements </h2>
<h2> div element </h2>
<center>
<div class= "container">
<h3> This is a div element which is centrally aligned. </h3>
</div>
</center>
<h2> section element </h2>
<center>
<div class= "container">
<h3> This is a section element which is centrally aligned. </h3>
</div>
</center>
</body>
</html>
Conclusion
The user experience will greatly benefit from a simple web page design. People are more likely to want to interact with you, if they have a nice experience when visiting your website. It's also simpler to read and discover information when it's clean. People will visit a rival website if your page is difficult to understand. You want visitors to your website to take action once they are there. And it shouldn't be a departure. In this article, we have discussed about the two methods to centrally align block-level elements. One of the methods is to specify external width and margin of the element, while the other is to create the block elements within <center> tags.
283 Views
