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;
}