Vertical Align in Span Doesn't Work? [duplicate] - html

Question

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>

Answer 1

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.

Answer 2

Old question but nowadays CSS3 makes vertical alignment really simple!
Just add to #abc the following css:
display:flex;
align-items:center;
Simple Demo
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>

Answer 3

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>

Answer 4

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.

Answer 5

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>

Answer 6

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%);

Answer 7

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;
}
Fiddle, line-height
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.

Answer 8

.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>

Answer 9

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

Answer 10

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

Answer 11

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