vertical align middle in <div>
CssVertical AlignmentCss Problem Overview
I want to keep the height of #abc
div
at 50px
and text to align vertically in the middle of the div
.
body{
padding: 0;
margin: 0;
margin: 0px auto;
}
#main{
position: relative;
background-color:blue;
width:500px;
height:500px;
}
#abc{
font:Verdana, Geneva, sans-serif;
font-size:18px;
text-align:left;
background-color:#0F0;
height:50px;
vertical-align:middle;
}
<div id="main">
<div id="abc">
asdfasdfafasdfasdf
</div>
</div>
Css Solutions
Solution 1 - Css
You can use line-height: 50px;
, you won't need vertical-align: middle;
there.
The above will fail if you've multiple lines, so in that case you can wrap your text using span
and than use display: table-cell;
and display: table;
along with vertical-align: middle;
, also don't forget to use width: 100%;
for #abc
#abc{
font:Verdana, Geneva, sans-serif;
font-size:18px;
text-align:left;
background-color:#0F0;
height:50px;
display: table;
width: 100%;
}
#abc span {
vertical-align:middle;
display: table-cell;
}
Another solution I can think of here is to use transform
property with translateY()
where Y
obviously stands for Y Axis. It's pretty straight forward... All you need to do is set the elements position to absolute
and later position 50%
from the top
and translate from it's axis with negative -50%
div {
height: 100px;
width: 100px;
background-color: tomato;
position: relative;
}
p {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
Note that this won't be supported on older browsers, for example IE8, but you can make IE9 and other older browser versions of Chrome and Firefox by using -ms, -moz
and -webkit
prefixes respectively.
For more information on transform
, you can refer here.
Solution 2 - Css
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 {
background-color:#f18c16;
height:150px;
display:flex;
align-items:center;
/* Uncomment next line to get horizontal align also */
/* justify-content:center; */
}
<div class="vertical-align-content">
Hodor!
</div>
Solution 3 - Css
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{
display: table;
}
.child{
display: table-cell;
vertical-align: middle;
padding-left: 20px;
}
<div class="parent">
<div class="child">
Test
</div>
<div class="child">
Test Test Test <br/> Test Test Test
</div>
<div class="child">
Test Test Test <br/> Test Test Test <br/> Test Test Test
</div>
<div>
[1]: http://jsfiddle.net/burakcanga/SK48T/ "Demo"
Solution 4 - Css
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.
Solution 5 - Css
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%);
Solution 6 - Css
div {
height:200px;
text-align: center;
padding: 2px;
border: 1px solid #000;
background-color: green;
}
.text-align-center {
display: flex;
align-items: center;
justify-content: center;
}
<div class="text-align-center"> Align center</div>
Solution 7 - Css
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.
Solution 8 - Css
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;
}
Solution 9 - Css
This Code Is for Vertical Middle and Horizontal Center Align without specify fixed height:
.parent-class-name {
position: relative;
}
.className {
position: absolute;
top: 50%;
left: 0;
right: 0;
margin: 0 auto;
transform: translateY(-50%);
-moz-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
}
Solution 10 - Css
.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>
Solution 11 - Css
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