Automatically center HTML elements horizontally
Posted: Fri Aug 10, 2018 4:29 pm
Today I am going to show you a simple code segment which will save you a lot of time.
Using this you can easily center any HTML element horizontally on all resolutions.
Here is the HTML part
This is where we do our magic. CSS
Using this you can easily center any HTML element horizontally on all resolutions.
Here is the HTML part
Code: Select all
<div class="main-div">
<div>Div 1</div>
<div>Div 2</div>
<div>Div 3</div>
</div>Code: Select all
.main-div{
// This is what centers our elements
text-align: center;
}
.main-div div{
// these all just to make the elements look good
width : 100px;
background-color: red;
margin: 10px 0;
color: white;
text-align: center;
// This is the important part
display: inline-block;
}
