Перемещение CSS по свойству вертикального выравнивания

Question

Как сделать div с вертикальным выравниванием: сверху, изменить его положение на вертикальное выравнивание: среднее, но с плавным анимированным переходом через эти состояния?

Я не могу заставить его работать, вертикально-выровнять непереходным?

Код:

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

Вот скрипка: https://jsfiddle.net/7amp783t/

Answer 1

Я думаю, вы должны использовать Jquery для создания скользящего анимации. Вы можете использовать функцию Google jQuery для этого. http://api.jquery.com/toggle/

http://api.jquery.com/slidetoggle/

Answer 2

Попытка преобразования вместо вертикального выравнивания его середине. Этот код будет делать то же самое, что вы пытаетесь выполнить. Изменение состояния парения включать 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 3

Вместо изменения vertical-align собственности, использовать transform: translateY() для перемещения вверх и вниз.

Я имел скрипку и получил этот код для работы:

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

translateY(-50%) перемещает текст «вверх» (отсюда -) на 50% от высоты родительского окна.

EDIT Вам не нужно беспокоиться об установке position: relative родительского div. Я удалил его для ясности.

Я обновил your JSFiddle, также.

Answer 4

и может попробовать этот образец:

с помощью преобразования: translateY (-50%); Метод 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%; 
} 

дайте мне знать, если и нужно дополнительно помочь

Answer 5

если вы хотите использовать вертикальное выравнивание, вы не должны использовать внутри таблицы-клетки, но с 2-х элементов бок о бок, где вы можете задавать значения вокруг высоты линии, которую они производят. В этом случае vertical-align может принимать заданные значения или значения чисел.

https://www.w3.org/wiki/CSS/Properties/vertical-align#Values

Потому что ваш пример дает высоту 200px, мы можем играть вокруг этого: 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 6

положение: родственник может быть легким способом :

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

Answer 7

CSS Transitions определяет vertical-align, как анимируемым, но только тогда, когда интерполирования между двумя значениями длины.

┌────────────────┬───────────┐ 
│ Property Name │ Type  │ 
├────────────────┼───────────┤ 
│ vertical-align │ as length │ 
└────────────────┴───────────┘

Таким образом, переходы между bottom и middle не будет гладким.

Если вы использовали vertical-align для выравнивания элемента линейного уровня относительно его линейного блока, вы можете попробовать использовать значения длины.

Однако вы используете его в ячейке таблицы, которая имеет другое поведение, как определено в Table height algorithms. В частности, значения длины не применяются к ячейкам таблицы.