Temiks

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

Recommended Posts

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

<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 by Temiks

Share this post


Link to post
Share on other sites

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

Share this post


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

 

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

Пример:

s_1445090373_6974583_a4bf5fff88.jpg

 

 

 

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

 

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

s_1445090446_5847340_464cf60c5b.png

Edited by Temiks

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Edited by Temiks

Share this post


Link to post
Share on other sites

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

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

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

Share this post


Link to post
Share on other sites
.cell { display: block;
 
Да, но если правильно понимаю, тогда не получится содержимое всплывающего блока выравнивать по вертикали, т.к .cell будет уже не со свойством display: table-cell, а с  display: block;  :unsure:

Share this post


Link to post
Share on other sites

 

.cell { display: block;
 

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

 

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

 

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

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

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Member Statistics

    46,340
    Total Members
    3,128
    Most Online
    Someone
    Newest Member
    Someone
    Joined
  • Recently Browsing   0 members

    No registered users viewing this page.