How to align element to the center of the Html
Centering Html elements can be quite annoying. Even someone who has a lot of experience in CSS may find it difficult to adjust the element to the center of the page. Here are some methods to center the element horizontally. Please contact me if you would like me to continue this tutorial on how to center elements vertically.Center Horizontally
The word horizontal is derived from the Latin horizon and means viewing distance. Horizontal is the straight line that can be drawn on the sea surface. And it is the x-axis on cartesian coordinate system.Methods
- Center text in a div using text align
- Center text in a div using justify content
- Center text in a div by centering the div using auto margin
- Center div in a div using auto margin;
Center By Text Align
Center By Justify Content
Center text in a div by centering the div using auto margin.
Center text in a div using text align
<style>
.CenterThisTextByAlign {
text-align: center;
width:100%;
border: solid 1px blue;
padding:10px;
background-color: blue;
color:white;
}
</style>
HTML code
----------
<div class="CenterThisTextByAlign">
Center By Text Align.
</div>
.CenterThisTextByAlign {
text-align: center;
width:100%;
border: solid 1px blue;
padding:10px;
background-color: blue;
color:white;
}
</style>
HTML code
----------
<div class="CenterThisTextByAlign">
Center By Text Align.
</div>
Center By Text Align
Center text in a div using justify content
<style>
.CenterThisTextByJustify {
display: flex;
justify-content: center;
width:100% ;
border: solid 1px black;
padding:10px;
background-color: red;
color:white;
}
</style>
HTML code
----------
<div class="CenterThisTextByJustify">
Center By Justify Content.
</div>
.CenterThisTextByJustify {
display: flex;
justify-content: center;
width:100% ;
border: solid 1px black;
padding:10px;
background-color: red;
color:white;
}
</style>
HTML code
----------
<div class="CenterThisTextByJustify">
Center By Justify Content.
</div>
Center By Justify Content
Center text in a div by centering the div using auto margin
<style>
.CenterTextByCenterDivAutoMargin {
margin: auto;
width: 60%;
border: 1px solid black;
background-color: orange;
color:black;
padding: 10px;
}
</style>
HTML code
----------
<div class="CenterTextByCenterDivAutoMargin">
Center text in a div by centering the div using auto margin.
</div>
.CenterTextByCenterDivAutoMargin {
margin: auto;
width: 60%;
border: 1px solid black;
background-color: orange;
color:black;
padding: 10px;
}
</style>
HTML code
----------
<div class="CenterTextByCenterDivAutoMargin">
Center text in a div by centering the div using auto margin.
</div>
Center text in a div by centering the div using auto margin.
Center div in a div using auto margin;
<style>
.containeDiv {
width:100%;
text-align: center;
border: solid 1px black;
background-color:white
}
.insideDiv {
width: 50px;
height: 50px;
background-color: yellow;
margin: 0 auto;
border: solid 1px black
}
</style>
HTML code
----------
<div class="containeDiv">
<div class ="insideDiv"> </div>
</div>
.containeDiv {
width:100%;
text-align: center;
border: solid 1px black;
background-color:white
}
.insideDiv {
width: 50px;
height: 50px;
background-color: yellow;
margin: 0 auto;
border: solid 1px black
}
</style>
HTML code
----------
<div class="containeDiv">
<div class ="insideDiv"> </div>
</div>