Hy Everyone, In this tutorial, we will learn How we can align any content in Vertical and Horizontal center using CSS.
Table of Contents
Vertical and Horizontal Center in CSS
As we have always seen, we can easily align any content Horizontally Left, right, or center. But when it comes to Vertical Align it takes a lot of time.
We can use a simple property text-align: center; to align any content center of the screen horizontally.
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.container{
width: 100%;
text-align: center;
}
.div{
width: 40px;
background-color: black;
display: inline-block;
}
.div1{
height: 50px;
}
.div2{
height: 70px;
}
.div3{
height: 30px;
}
</style>
</head>
<body>
<div class="container">
<div class="div div1"></div>
<div class="div div2"></div>
<div class="div div3"></div>
</div>
</body>
</html>
Run this code!
All the Child elements of the .container class will be Horizontally Centered using text-align: center; property.
Now We will learn an important property, that will help us to align our content vertically aligned.
vertical-align
Vertical-align property is used to align any content top, middle, or center. Here we will discuss all three values.
vertical-align: bottom;
It is a default property, as you can see in the above code snippet, all divs have a different height and are aligned bottom. It means we have no need to apply this property if our content is already bottom aligned.
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.container{
width: 100%;
text-align: center;
}
.div{
width: 40px;
background-color: black;
display: inline-block;
vertical-align: bottom;
}
.div1{
height: 50px;
}
.div2{
height: 70px;
}
.div3{
height: 30px;
}
</style>
</head>
<body>
<div class="container">
<div class="div div1"></div>
<div class="div div2"></div>
<div class="div div3"></div>
</div>
</body>
</html>vertical-align: top;
if we apply top as a value, all the div will be in the top position. If there are multiple divs with different heights, then the top value will align all divs with the highest height div. Let’s Take an example.
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.container{
width: 100%;
text-align: center;
}
.div{
width: 40px;
background-color: black;
display: inline-block;
vertical-align: top;
}
.div1{
height: 50px;
}
.div2{
height: 70px;
}
.div3{
height: 30px;
}
</style>
</head>
<body>
<div class="container">
<div class="div div1"></div>
<div class="div div2"></div>
<div class="div div3"></div>
</div>
</body>
</html>
all the divs are aligned with the .div2 class div because this div has a maximum height.
You can change the other div height to see the difference.
vertical-align: middle;
This value is used to align all the content in the center position in the vertical view.
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.container{
width: 100%;
text-align: center;
}
.div{
width: 40px;
background-color: black;
display: inline-block;
vertical-align: middle;
}
.div1{
height: 50px;
}
.div2{
height: 70px;
}
.div3{
height: 30px;
}
</style>
</head>
<body>
<div class="container">
<div class="div div1"></div>
<div class="div div2"></div>
<div class="div div3"></div>
</div>
</body>
</html>Where we can use this property?
We can use this property to create a header when we have different sections like the logo section, menu section, and login section.
Also can be used in the footer section, when we need to align multiple sections to the top position.
Hope this Article was Interesting!
You Might Like This:
- Color Changing Search Bar
- Text Reveal Animation
- Product Card
- CSS Scroll Animation
- Magnetic Hover Interaction
- Glassmorphism Icon Buttons
- Click To Send
