I want to keep the height of #abc div at 50px and text to align vertically in the middle of the div.
body{_x000D_
padding: 0;_x000D_
margin: 0;_x000D_
margin: 0px auto;_x000D_
}_x000D_
_x000D_
#main{_x000D_
position: relative;_x000D_
background-color:blue;_x000D_
width:500px;_x000D_
height:500px;_x000D_
}_x000D_
_x000D_
#abc{_x000D_
font:Verdana, Geneva, sans-serif;_x000D_
font-size:18px;_x000D_
text-align:left;_x000D_
background-color:#0F0;_x000D_
height:50px;_x000D_
vertical-align:middle;_x000D_
}<div id="main">_x000D_
<div id="abc">_x000D_
asdfasdfafasdfasdf_x000D_
</div>_x000D_
</div>This question is related to
css
vertical-alignment
Old question but nowadays CSS3 makes vertical alignment really simple!
Just add to #abc the following css:
display:flex;
align-items:center;
Original question demo updated
Simple Example:
.vertical-align-content {_x000D_
background-color:#f18c16;_x000D_
height:150px;_x000D_
display:flex;_x000D_
align-items:center;_x000D_
/* Uncomment next line to get horizontal align also */_x000D_
/* justify-content:center; */_x000D_
}<div class="vertical-align-content">_x000D_
Hodor!_x000D_
</div>This Code Is for Vertical Middle and Horizontal Center Align without specify fixed height:
.parent-class-name {_x000D_
position: relative;_x000D_
}_x000D_
_x000D_
.className {_x000D_
position: absolute;_x000D_
top: 50%;_x000D_
left: 0;_x000D_
right: 0;_x000D_
margin: 0 auto;_x000D_
transform: translateY(-50%);_x000D_
-moz-transform: translateY(-50%);_x000D_
-webkit-transform: translateY(-50%);_x000D_
}You can use Line height a big as height of the div.
But for me best solution is this --> position:relative; top:50%; transform:translate(0,50%);
Use the translateY CSS property to vertically center your text in it's container
<style>
.centertext{
position: relative;
top: 50%;
transform: translateY(40%);
}
</style>
And then apply it to your containing DIV
<div class="centertext">
<font style="color:white; font-size:20px;"> Your Text Here </font>
</div>
Adjust the translateY percentage to suit your needs. Hope this helps
.container {
height: 200px;
position: relative;
border: 3px solid green;
}
.center {
margin: 0;
position: absolute;
top: 50%;
left: 50%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}<h2>Centering Div inside Div, horizontally and vertically without table</h2>
<p>1. Positioning and the transform property to vertically and horizontally center</p>
<p>2. CSS Layout - Horizontal & Vertical Align</p>
<div class="container">
<div class="center">
<p>I am vertically and horizontally centered.</p>
</div>
</div>Try this:
.main_div{
display: table;
width: 100%;
}
.cells {
display: table-cell;
vertical-align: middle;
}
Another method for centering a div:
<div id="parent">
<div id="child">Content here</div>
</div>
#parent {position: relative;}
#child {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 50px;
height: 100px;
margin: auto;
}
I found this solution by Sebastian Ekström. It's quick, dirty, and works really well. Even if you don't know the parent's height:
.element {
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
Read the full article here.
How about adding line-height ?
#abc{
font:Verdana, Geneva, sans-serif;
font-size:18px;
text-align:left;
background-color:#0F0;
height:50px;
vertical-align:middle;
line-height: 45px;
}
Or padding on #abc. This is the result with padding
Update
Add in your css :
#abc img{
vertical-align: middle;
}
The result. Hope this what you looking for.
div {_x000D_
height:200px;_x000D_
text-align: center;_x000D_
padding: 2px;_x000D_
border: 1px solid #000;_x000D_
background-color: green;_x000D_
}_x000D_
_x000D_
.text-align-center {_x000D_
display: flex;_x000D_
align-items: center;_x000D_
justify-content: center;_x000D_
}<div class="text-align-center"> Align center</div>It's simple: give the parent div this:
display: table;
and give the child div(s) this:
display: table-cell;
vertical-align: middle;
That's it!
.parent{_x000D_
display: table;_x000D_
}_x000D_
.child{_x000D_
display: table-cell;_x000D_
vertical-align: middle;_x000D_
padding-left: 20px;_x000D_
}<div class="parent">_x000D_
<div class="child">_x000D_
Test_x000D_
</div>_x000D_
<div class="child">_x000D_
Test Test Test <br/> Test Test Test_x000D_
</div>_x000D_
<div class="child">_x000D_
Test Test Test <br/> Test Test Test <br/> Test Test Test_x000D_
</div>_x000D_
<div>Source: Stackoverflow.com