Get this book -> Problems on Array: For Interviews and Competitive Programming
In this article, we have discussed Different ways to center elements in HTML. Firstly we'll discuss on the Introduction to the article. Later part, we'll understand ways of centering elements of HTML elements - Horizontally, in-line with other elements and at exact center.
Following are the sections of this article:-
1. Introduction
In this article we'll explore the vaipus methods to center the HTML elements. There are couple of ways that we can achieve the functionality. I would suggest you hold your curiosity till the end of the article. In this journey you can learn the scenarios so you can wrap your mind around how they work and come away with the confidence to center anything!
Is this article for you?!
This article is for those who are trying to explore more frontend related functionality and for the one's who have actually started exploring things around for the concept. So lets get started!
2. Ways to centre HTML elements
I. Horizontally Center an Element
In this learning journey, our first scenario that we look in to is, centering an element horizontally in the viewport or browser window. In this article we are experimenting our scenarios with the following HTML snippet, file - example.html
<!DOCTYPE html>
<html>
<head>
<title>Example for the Article</title>
<link rel="stylesheet" type="text/css" href="./elementCenter.css">
</head>
<body>
<div>
<h1>Hello!<h1/>
</div>
<body/>
<html/>
For the above HTML snippet, we'll center its existing tag's or add new tag's.Following is the code snippet for the <div> tag, file - elementCenter.css
div{
background: #aaa;
height: 500px;
width: 500px;
margin: 0 auto;
}
Below is the output at the browser,
From the above image, as we can see applying a single line of CSS it made the <div> tag's element to center horizontally. In the above snippet of CSS we have made use of the properties like-
background - to represent the div area. height - to define the height of the div area in pixel unit. width - to define the width of the div area in pixel unit. Tricky thing we have made use of CSS shorthand by using auto as the value for the margin, that is automatically centering the <div> tag horizontally.
II. Centering Element inside other Element
In this scenario we'll be centering the <h1> tag & <p> tag inside the <div> tag. which means, we are centering a HTML element <h1> tag using <center> tag and <p> tag using normal CSS stuff. Following is the code snippet part of HTML,
<html>
<head>
<title>Example for the Article</title>
<link rel="stylesheet" type="text/css" href="./HZ.css">
</head>
<body>
<div>
<h1><!--Here we have made use of center tag to center text-->
<center>Hello!</center>
</h1>
<p>Welcome to OpenGenus! This is the best organisation in which, they provide proper guidance to the resources.</p>
</div>
<body/>
<html/>
Following is the CSS code snippet for the same, adding the below change to the previous CSS snippet
p {
width: 60%;
margin: auto;
font: sans-serif;
}
Below is the output at the browser
From the above image, we can see that inside <div> area we have the <h1> tag section and <p> tag section. For <p> tag the properies are coming from the CSS properties. Here we have added an extra property as font to differentiate it from <h1> tag.
III. Centering using in-line CSS
This is one such a way that its the continuation of the previous method or similar way around. The method of defining the rule for the elements to be center will differ.
<!DOCTYPE html>
<html>
<head>
<title>Example for the Article</title>
<link rel="stylesheet" type="text/css" href="./HZ.css">
</head>
<body>
<div>
<h1><!--Here we have made use of center tag to center text-->
<center>Hello!</center>
</h1>
<!--Here we have made use of style tag inline to p tag, to center paragraph-->
<p style="text-align: center;">Welcome to OpenGenus! This is the best organisation in which, they provide proper guidance to the resources.</p>
</div>
<body/>
<html/>
Following is the output,
From the above image and the example HTML snippet, we have made use of in-line style property to paragraph tag to center it inside the div tag. There are not much difference we can make out at this point except that previously we have made use of font property while we seperatly defined the CSS file.
IV. Centering text exact Dead-center
In this section we'll look at how we are going to center the above paragraph tag at exact dead center inside the <div> section.
Following is the code snippet from HTML perspective,
<!DOCTYPE html>
<html>
<head>
<title>Example for the Article</title>
<link rel="stylesheet" type="text/css" href="./HZ.css">
</head>
<body>
<div class="box">
<h1>OpenGenus is Best <3!</h1>
</div>
<body/>
<html/>
Here inside <div> we have define a class name box, inside which we are going to display the text at exact center of that <div> section. So main idea on all these experiments or scenarios is to understand the different front of the CSS properties as well to explore the things and learn. Following is the CSS code snippet,
.box{
background: #aaa;
height: 200px;
width: 600px;
margin: 150px auto;
}
h1 {
font: 40px/200px sans-serif;
text-align: center;
}
From the above snippet, we have defined the properties for the class box, by using CSS Selectors. Here in this implementation we have used dot as CSS class Selector. Below is the output at browser,
This trick actually dependent on the width and the height of the <div> area. We are displaying the text by calculating, so as to it should fit inside the <div> section.
3. Conclusion
As always, learning never ends! But we are at the end of the article. We have started saying we'll explore a bit about 'centering' the elements of HTML with help of CSS. We have explored different options and ways of centering the elements of HTML and displaying the text as well. I hope this was an informative artcle.
Thanks :)!
