CSS transition on vertical-align property - css

Question

How can I make a div that has vertical align:top, change it's position to vertical-align: middle, but have a smooth animated transition through those states?
I can't get it to work, is vertical-align non transitionable?
Code:
.outer{
width:200px;
height:200px;
background:red;
display:table;
text-align:center;
}
.inner{
width:100px;
height:100px;
vertical-align:bottom;
display:table-cell;
transition:all 2s;
}
.inner:hover{
vertical-align:middle;
}
Here's the fiddle: https://jsfiddle.net/7amp783t/

Answer 1

Instead of changing the vertical-align property, use transform: translateY() to move up and down.
I've had a fiddle and got this code to work:
.outer{
width:200px;
height:200px;
background:red;
display:table;
text-align:center;
}
.inner{
width:100px;
height:100px;
display:table-cell;
vertical-align: bottom;
transition: all 2s ease-in-out;
}
.inner:hover{
transform: translateY(-50%);
}
The translateY(-50%) moves the text "up" (hence the -) by 50% of the height of its parent box.
EDIT You don't need to worry about setting the position: relative of the parent div. I've removed it for clarity.
I've updated your JSFiddle, also.

Answer 2

if you want to use vertical-align, you should not use inside a table-cell but with 2 elements side by side, where you can set values around the line-height they produce. In this case, vertical-align can take lots predefined values or numerics values.
https://www.w3.org/wiki/CSS/Properties/vertical-align#Values
Because your example gives an height of 200px, we may play around this : https://jsfiddle.net/7amp783t/5/
.outer{
font-size:18px;/* whatever */
width:200px;
height:200px;
background:red;
text-align:center;
}
.outer:before {
content:'';
display:inline-block;
height:100%;/* here the line is 100% height of container: set to 200px */
vertical-align:calc(-200px + 1em); /*chrome instead bottom */
}
.inner{
vertical-align:0;/* from bottom : calc(-200px + 2em) go all the way down minus room for text */;
display:inline-block;
transition:all 2s;
}
.outer:hover .inner{/* outer, else you need to follow inner */
vertical-align:calc(-100px + 1em);/* lets go half way */
}
<div class="outer">
<div class="inner">
Hover me box
</div>
</div>

Answer 3

CSS Transitions defines vertical-align as animatable, but only when interpolating between two length values.
┌────────────────┬───────────┐
│ Property Name │ Type │
├────────────────┼───────────┤
│ vertical-align │ as length │
└────────────────┴───────────┘
Therefore, transitions between bottom and middle won't be smooth.
If you were using vertical-align to align an inline-level element relatively to its line box, you could try using length values.
However, you are using it on a table cell, which has a different behavior, as defined in Table height algorithms. In particular, length values don't apply to table cells.

Answer 4

I think you have to use Jquery to create a sliding animation. You can use jQuery's toogle function to do so.
http://api.jquery.com/toggle/
http://api.jquery.com/slidetoggle/

Answer 5

Try transform instead of vertical aligning it to middle. This code will do same what you are trying to accomplish. Change your hover state to include translateY(-50%)
Working Demo
.outer{
width:200px;
height:200px;
background:red;
display:table;
text-align:center;
}
.inner{
width:100px;
height:100px;
vertical-align:bottom;
display:table-cell;
transition:all 2s;
}
.inner:hover{
transform: translateY(-50%);
}

Answer 6

u can try this sample:
using the transform: translateY(-50%); method
css vertical align animation
.block {
background: orange;
height: 500px;
}
.centered {
text-align: center;
background: pink;
position: relative;
top: 0;
-webkit-transition: all .5s;
-moz-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
}
.block:hover .centered {
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
top: 50%;
}
let me know if u need further help

Answer 7

position:relative can be an easy way:
.outer {
width: 200px;
height: 200px;
background: red;
display: table;
text-align: center;
}
.inner {
position: relative;
top: 0;
display: table-cell;
transition: all 2s;
}
.inner:hover {
top: 50%;
}
<div class="outer">
<div class="inner">
Hover me
</div>
</div>