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,614
    Total Members
    3,128
    Most Online
    PPPoison
    Newest Member
    PPPoison
    Joined
  • Recently Browsing   0 members

    No registered users viewing this page.

  • Спрашивают сейчас

  • Пишут сейчас

    • сделал класс narrow чтобы уменьшить ширину, но на место не возвращается блок читал что ширина сетки 960px, а в шаблоне ширина 1140px
    • Потому что 1-й блок не имеет отступа слева. А 4-й имеет, из-за чего доступная область на втором рже меньше.
      В связи с этим последний блок "перескочил" на следующую строку только потому, что ему не хватает места.
    • <div id="openModal" class="modalDialog"> <div> <a href="#close" title="Закрыть" class="close">X</a> <h2>Обратная связь</h2> <form name="MyForm" action="#openModal" method="post"><br> <input name="name" style="width: 420px" type="text" placeholder="Ваши фамилия, имя, отчество" /><br> <input name="tel" style="width: 420px" type="tel" placeholder="Ваш номер телефона" /><br> <input name="email" style="width: 420px" type="email" placeholder="Ваша электронная почта" /><br> <textarea name="body" style="width: 420px" placeholder="Ваше сообщение"></textarea><br> <br>Нажимая на кнопку "Отправить", я даю согласие на обработку своих персональных данных в соответствии с <a href="politika.htm" target="_blank">Политикой конфиденциальности</a><br> <p style="text-align: center"><input type="submit" value="Отправить" id="btnpng4" /></p> </form> <?php if (isset($_POST["email"]) || isset($_POST["tel"])){ if (isset($_POST["name"])) {$name = $_POST["name"];} if (isset($_POST["tel"])) {$tel = $_POST["tel"];} if (isset($_POST["email"])) {$email = $_POST["email"];} if (isset($_POST["body"])) {$body = $_POST["body"];} if(empty($email) or empty($name) or empty($body)){   //отправка сообщения на email } else if(empty($tel) or empty($name) or empty($body)){   //отправка сообщения на tel } else{   //вывод предупреждения, что не заполнены обязательные поля } комментарии    
      Заменить на соответствующий код который будет выполнять эти действия
  • Popular Contributors