In this article we are going to explore different ways you can implement vertical alignment in CSS along with examples and use-cases for each method
Here are the list of different ways we are going to explore
- Vertical alignment using Flexbox
- Vertical alignment using position: absolute
- Vertical alignment using Display: table
- Vertical alignment using CSS: Grid
- Vertical alignment using Line Height
- Vertical alignment using Padding
- Vertical alignment using Display: inline-block
- Vertical alignment using CSS calc() function
- Vertical alignment using margin: auto
let's go through each of these one by one
1. Vertical Alignment using flexbox
Flexbox is a layout mode in CSS3. Flexbox allows you to automatically align and resize containers based on the height and width of the screen
Flexbox is also direction agnostic unlike some other CSS frameworks. Here is how you can easily vertically align an object using flexbox
The properties that we will need to vertically align are
- display: flex
- align-items: center
You can also use flex-direction: col to align the items vertically insead of row
let us consider an example
Example 1: Aligning Nav Bar
.nav {
display: flex;
justify-content: space-around;
height: 60px;
background-color: #333;
color: #fff;
align-items: center; /*aligns the items vertically*/
}
<nav class="nav">
<div class="nav-item">Home</div>
<div class="nav-item">About</div>
<div class="nav-item">Services</div>
<div class="nav-item">Contact</div>
</nav>
Example: 2 Vertically center alignment of text in a hero section
In this example we will vertically align the text in a hero section.
<section class="hero-section">
<h1 class="hero-title">Awesome Corporation!</h1>
</section>
.hero-section {
display: flex;
flex-direction: column; /* this will create a column of elements */
justify-content: center; /* The property centers the elements vertically. */
height: 100vh; /* we are giving the full viewport height */
text-align: center; /* we are aligning the text horizontally */
color: #blue;
}2. Vertical alignment using position: absolute
position:absolute
can be used to vertically align CSS. However, it should be used with caution as it could lead to layout problems if it is not used properly.
Other CSS properties such as flexbox or Grid are preferable to using position: absolute.
Here are some of the examples of
Example 1: vertically aligning one element in the middle of a parent element
<div class="parent-element">
<div class="child-element">Centered text!</div>
</div>
.parent-element {
position: relative;
height: 200px;
border: 1px solid black;
}
.child-element {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
Example 2: Aligning multiple elements vertically using position: absolute
In this example we will learn how to align multiple elements vertically using **position: absolute**
<div class="parent-element">
<div class="child-element" id="child1">Element a</div>
<div class="child-element" id="child2">Element b</div>
<div class="child-element" id="child3">Element c</div>
</div>body {
font-family: sans-serif;
}
.parent-element {
position: relative;
height: 300px;
border: 1px solid black;
}
.parent {
position: relative;
height: 300px;
border: 1px solid black;
}
.child {
position: absolute;
width: 100%;
}
#child1 {
top: 0;
}
#child2 {
top: 100px;
}
#child3 {
top: 200px;
}
3. Vertically Align items using Display: table
In this method we will use the properties of the table element to align elements vertically
Example 1: Vertically aliogn in the middle of a Parent element
let's look at the code
body {
font-family: sans-serif;
}
.parent-element {
display: table;
height: 200px;
width: 100%;
border: 1px solid black;
}
.child-element {
display: table-cell;
vertical-align: middle;
text-align: center;
}
<div class="parent-element">
<div class="child-element">Center me!</div>
</div>In this example the parent is a table and the child is a table cell. we are then vertically aligning the child using the vertical-align: middle property
Example 2: Aligning 3 elements vertically in a Single Line
Let us look at the code first and then discuss it further
<div class="parent-element">
<div class="child-element">Element A</div>
<div class="child-element">Element B</div>
<div class="child-element">Element C</div>
</div>
and CSS
body {
font-family: sans-serif;
}
.parent-element {
display: table;
width: 100%;
border: 1px solid black;
}
.child-element {
display: table-cell;
height: 100%;
border: 1px solid red;
}
In this case we are displaying each child element as a table cell within the table parent container
4. Vertical alignment using CSS: Grid
Let us use the CSS grid. The Grid provides a simple way to vertically align the content
Example 1 : Aligning a single child vertically inside a parent container
<div class="grid">
<div class="item">Item that is in center</div>
</div>.grid {
display: grid;
height: 100vh;
justify-content: center;
align-items: center;
}In this example we have a Grid class and an item class and we are giving the grid class the property of display:grid and we are aligning items in center
Note: Grid is not supported with older browsers, but many newer browsers support.
Example 2: Aligning multiple items vertically inside a container
In this example we are going to vertically align multiple items
<div class="grid">
<div class="item">Item A</div>
<div class="item">Item B</div>
<div class="item">Item C</div>
</div>.grid {
display: grid;
grid-template-rows: repeat(3, 1fr);
gap: 10px;
height: 100vh;
align-items: center;
justify-content: center;
}5. Vertical Alignment using Line Height
Vertical alignment can be used to align individual lines of text. Use this method when you have fixed height only
Let us look at some of the examples to better understand
Example 1: Cantering text in a navigation bar
In this. example we are going to vertically center the links in the navigation bar using line height
<div class="navbar">
<a href="#">Support</a>
<a href="#">Products</a>
<a href="#">Services</a>
</div>body {
font-family: sans-serif;
}
.navbar {
height: 50px;
background-color: #333;
}
.navbar a {
line-height: 50px;
color: #fff;
text-decoration: none;
padding: 0 10px;
}Example 2: Centering text in a button
If you have a big button and you want to center the text inside the button, you can do it using line height.
The trick to center text using line height is to set it at 50%
<!DOCTYPE html>
<html>
<body>
<button class="signup-button">Sign up for a new Account</button>
<script src="src/index.js"></script>
</body>
</html>
body {
font-family: sans-serif;
}
.signup-button {
height: 40px;
line-height: 40px;
border: none;
background-color: #008cba;
color: white;
padding: 0 20px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
}
6 Vertical alignment using padding
Many times padding can be used to align items inside a container. Remember
We have a button with fixed height and we want to center the text inside it vertically
<button class="sign-up">Sign Up</button>
.sign-up {
padding: 10px 20px;
background-color: blue;
color: white;
border: none;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
}
In the above example we are giving the top and bottom padding of 10 px and left and right padding of 20px to center the text where we want to inside the button
The next example is an important one and much searched across the internet
Example 2: Vertically centering a single line of text inside of a div
<div class="box">Vertically centered text</div>
.box {
height: 50px;
padding: 15px 0;
border: 1px solid #000;
text-align: center;
}
Here we have 15px of padding applied on top and bottom of the div with the class box
the padding pushes the div borders 15px up and down thus vertically cantering the text in the middle
7. Vertical alignment using Display: inline-block
Display: inline-block is na important css property using which you can display the element inline (like an inline element) and you can also adjust the height and width of the element as well like an block element
It is important to note that the inline-element works in realtion to its sibling elements and not inside the element
vertical-align property can be used along with the inline-block element to vertically position the element in relation to each other
<!DOCTYPE html>
<html>
<body>
<div class="container">
<div class="navigation">
<a href="#">Products</a>
<a href="#">Services</a>
<a href="#">Support</a>
</div>
</div>
<script src="src/index.js"></script>
</body>
</html>body {
font-family: sans-serif;
}
.container > * {
display: inline-block;
vertical-align: middle;
}
.navigation a {
padding: 0 10px;
}
8. Vertical alignment using CSS calc() function
the calc() in css can be used to perform calculation to deteremine property values of elements.
It can also be used to align content by settings the top or bottom positions and substracting 50% of their height
the parent element should be set to relative and the child element should be set to absolute
<div class="container">
<div class="content">Hello, World!</div>
</div>
body {
font-family: sans-serif;
}
.container {
position: relative;
height: 300px;
border: 1px solid #000;
}
.content {
position: absolute;
top: calc(50% - 10px);
width: 100%;
text-align: center;
}
What are we doing here.
we are calculating the top position of the .content dev by using the calc(50% - 10px) This moves it down the halfway point of .container and then moves it up by half of its own height
9. Vertical alignment using margin: auto
The vertical alignment using margin:auto you can align the items vertically but this only works when the parent container has a specified height and the child container has a specified height and the parent is a flex container
let look at some examples to better
<!DOCTYPE html>
<html>
<body>
<section class="container">
<button class="button">Click Me!</button>
</section>
<script src="src/index.js"></script>
</body>
</html>
body {
font-family: sans-serif;
}
.container {
display: flex;
height: 300px;
border: 1px solid #000;
}
.button {
margin: auto;
}
In this example the parent has a specified height and the display:flex property.
the .hero-heading and margin:auto causes it to vertically and horizontally centered within the parent container
Conclusion
In this article we have shown different ways you can align items vertically using various css methods and properties
Here are all the methods summarized for you:
- Display: table Here you create the parent element as a table, doing this the child element becomes a table cell and hence can be easily vertically aligned
- Flexbox: Here we make the parent container into a flexible container and we can easily align the child components using the align-items property of flexbox
- CSS: Grid : With CSS Grid you can create rows and columns layout. Using the CSS Grid you can easily align the items vertically
- Line-height: In the line height method you can easily align single line of text within a container. If you know the height of the container you can easily set the line-height of the child and align it with the container as you want
- Padding: You can set the padding to increase and decrease the area surrounding the element and using that you can easily align the items vertically
- Display:inline-block: You can easily align inline text and images using the inline-block element properties
- CSS calc() function : Using the CSS calc() function you can calculate the height of the container and set the height of the child to automatically align with that of the container by setting the height to 50%
- Position:absolute : You can use this property to set position: absolute on the child element to align it with the parent property
- Margin:auto: You can set margin: auto in a flex container to automatically align the item or child element vertically and horizontally with respect to the parent container.
I hope that you find the article useful. Thank you for reading.