Вертикальное выравнивание

[Antoshka007]

Help!

Уверен, что для большинства задача до ужаса тривиальная, но у меня чего-то не выходит ее решить.
Вопрос простой: как выровнять блок по вертикали.
Вот такой пример: https://jsfiddle.net/742cx8wj/1/
Нужно, чтобы RIGHT было посередине.

Спасибо!

[Vicos]

https://jsfiddle.net/742cx8wj/2/

Важно! Выравниваемый блок должен быть inline-block.

Для одного слова или если уверен что не будет возможности переноса строки можно использовать line-height.

Edited March 28, 2015 by Vicos

[Antoshka007]

https://jsfiddle.net/742cx8wj/2/

Важно! Выравниваемый блок должен быть inline-block.

Для одного слова или если уверен что не будет возможности переноса строки можно использовать line-height.

Ваш пример работает только с параграфом. А с дивом он все равно поднимается наверх

[Vicos]

Смотрите внимательнее.

https://jsfiddle.net/742cx8wj/4/

.v-text div, .v-text p {  display: inline-block;  vertical-align: middle;  }

так же можно сделать и выравнивание для ссылок или

.v-text a, .v-text .v-block {  display: inline-block;  vertical-align: middle;  }

Как Вам удобнее.

Edited March 28, 2015 by Vicos

[Antoshka007]

Спасибо, получилось!

А без этой штуки никак нельзя сделать?

.v-text:before {

  content: "";

  display: inline-block;

  min-height: inherit;

  height: 100%;

  vertical-align: middle;

}

Смотрите внимательнее.

https://jsfiddle.net/742cx8wj/4/

.v-text div, .v-text p {  display: inline-block;  vertical-align: middle;  }

так же можно сделать и выравнивание для ссылок или

.v-text a, .v-text .v-block {  display: inline-block;  vertical-align: middle;  }

Как Вам удобнее.

Спасибо, получилось!

А без этой штуки никак нельзя сделать?

.v-text:before {

  content: "";

  display: inline-block;

  min-height: inherit;

  height: 100%;

  vertical-align: middle;

}

[Vicos]

Где наткнулся я на этот метод

.v-text:before {  content: "";  display: inline-block;  min-height: inherit;  height: 100%;  vertical-align: middle;}

Была пометка что это для IE8. Но без неё и на других браузерах не работает, а с ней без проблем.

Ответ: Нет.

[forest_moss]

https://jsfiddle.net/742cx8wj/2/

Важно! Выравниваемый блок должен быть inline-block.

Для одного слова или если уверен что не будет возможности переноса строки можно использовать line-height.

о, да это же отличное решение! спасибо большое

[Vicos]

Пожалуйста!)