Вертикальное выравнивание при абсолютном позиционировании

[Temiks]

Здравствуйте. Почему не работает вертикальное выравнивание при абсолютном позиционировании?
Код хтмл:

<div class="col">    <p>Lorem ipsum dolor sit amet..</p>    <div class="col-prew">text prew</div></div><div class="col">    <div class="col-prew">text prew</div></div><div class="col">    <div class="col-prew">text prew</div></div>

Код цсс:

.col {    display: table;    position: relative;    float: left;    width: 33.3%;    height: 250px;    background: red;}.col:nth-child(2n) {    background: green;}.col-prew {    display: table-cell;    position: absolute;    top: 0;    left: 0;    width: 100%;    height: 100%;    background: gray;    vertical-align: middle;}

Или же все сразу на http://jsfiddle.net/w9m2gs5g/

Подскажите, пожалуйста, как исправить проблему?

Edited October 17, 2015 by Temiks

[psywalker]

Если извращаться, то можно так. Но если есть возможность сделать на флексах, то лучше на них, ибо намного проще.

[psywalker]

.col {    display: table;    position: relative;    float: left;

Добавили бы тогда уж до кучи ещё и display: inline-block c display: flex; Ну а если серьёзно, то зачем вам нужны position: relative; и float: left;, если у вас выравнивание происходит в ячейках таблицы, естественно при помощи vertical-align: middle;?

Уберите вот этот код и будет вам счастье:

 

position: absolute;top: 0;left: 0;

[Temiks]

Добавили бы тогда уж до кучи ещё и display: inline-block c display: flex; Ну а если серьёзно, то зачем вам нужны position: relative; и float: left;, если у вас выравнивание происходит в ячейках таблицы, естественно при помощи vertical-align: middle;?

 

Мне нужно сделать адаптивные колонки, в колонках будет какой-то текст или изображение. Когда пользователь наведет указатель мыши на одну из колонок, то у пользователя должен появится новый блок с различным текстом(в примере это .col-prew) поверх этой колонки.

Пример:

 

 

 

Уберите вот этот код и будет вам счастье:

 

Спасибо за совет, но получилось не то, что нужно

Edited October 17, 2015 by Temiks

[psywalker]

Тогда вам придётся делать ещё один вложенный блок в .col-prew (и уже вложенный выравнивать по центру .col-prew), сам .col-prew растягивать на всю ячеку, прятать, а по наведению на ячейку показывать блок .col-prew с блоком для текста внутри.

[Temiks]

@psywalker, сделал как Вы написали, но у меня получилось тоже самое, что и было раньше. Можете, пожалуйста, написать пример? 

Edited October 17, 2015 by Temiks

[psywalker]

@psywalker, сделал как Вы написали, но у меня получилось тоже самое, что и было раньше. Можете, пожалуйста, написать пример? 

Да, помогу с радостью, только чуть позже, я только пришёл. Дайте минут 20-30.

[Temiks]

@psywalker, спасибо за помощь! Только как быть с адаптивностью если использовать первый вариант с таблицей?

[psywalker]

@psywalker, спасибо за помощь! Только как быть с адаптивностью если использовать первый вариант с таблицей?

Ну можно, например, заюзать медиазапросы и допустим на определённой ширине экрана менять поведение у ячеек на блочное: .cell { display: block;

[Temiks]

.cell { display: block;

 
Да, но если правильно понимаю, тогда не получится содержимое всплывающего блока выравнивать по вертикали, т.к .cell будет уже не со свойством display: table-cell, а с  display: block; 

[psywalker]

 

.cell { display: block;

 

Да, но если правильно понимаю, тогда не получится содержимое всплывающего блока выравнивать по вертикали, т.к .cell будет уже не со свойством display: table-cell, а с  display: block; 

 

В решении, которое я привёл, выравнивание не зависит от табличных ячеек.

 

Весь трюк заключается в...

				.cell__info:before {					display: inline-block;					height: 100%;					width: 0;					vertical-align: middle;					content: '';				}				.cell__info_inside {					display: inline-block;					vertical-align: middle;				}