vertical align middle in <div>
css, vertical-alignment
Solution
You can use `line-height: 50px;`, you won't need `vertical-align: middle;` there.
Demo
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`
Demo
#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%);
}
Demo
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.
Problem
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> ```