Как выровнять div внутри другого div без отображения: table-cell - PullRequest
Новая
       5

Как выровнять div внутри другого div без отображения: table-cell

12 голосов
/ 16 сентября 2011

Хорошо, это структура div. 

  <div class="DivParent"> 
  <a href="#">

  <div class="DivWhichNeedToBeVerticallyAligned"></div>

  </a>    
  </div>

DivParent имеет фиксированные значения ширины и высоты, но DivWhichNeedToBeVerticallyAligned не имеет фиксированных значений высоты.

Если вы используете отображение DivParent: таблица-ячейка;Вы можете выровнять DivWhichNeedToBeVerticallyAligned по вертикали, но я не хочу использовать эту функцию, так как она вызывает некоторую путаницу.

Ссылка на тег href должна быть такого же размера с divParent, я имею в виду, что весь divparent должен быть кликабельным.как display: block.

Так что любой способ CSS с вертикальным выравниванием или облегченное решение jquery также может помочь.

Спасибо.

Здесь jsfiddle : http://jsfiddle.net/XHK2Z/

*

Ответы [ 6 ]

43 голосов
/ 17 сентября 2011

Вы можете использовать дополнительный помощник для достижения вертикального выравнивания в блоке с фиксированной высотой.

Посмотрите на это: http://jsfiddle.net/kizu/7Fewx/

Там у вас должен быть помощник рядом с блоком, с которым вы хотите выровнять: 

.DivHelper {
    display: inline-block;
    vertical-align: middle;
    height:100%;
}

И добавить display: inline-block; vertical-align: middle; к .DivWhichNeedToBeVerticallyAligned

11 голосов
/ 17 сентября 2011

Невозможно сделать это с помощью CSS, не зная высоты дочернего элемента div.

С помощью jQuery вы можете сделать что-то подобное. 

var parentHeight = $('#parent').height();
var childHeight = $('#child').height();
$('#child').css('margin-top', (parentHeight - childHeight) / 2);
3 голосов
/ 21 марта 2014

Это решение прекрасно работает в современных браузерах, включая IE 10 и выше. 

<div class="parent">
    <div class="child">Content here</div>
</div>

включая этот CSS 

.parent {
  height: 700px;
  display: flex;
  justify-content: center;  
  align-items: center;
}
.child {
  width : 525px;
}
3 голосов
/ 17 сентября 2011

если у родителя нет другого ребенка.это будет только хак только css 

DivParent{line-height:100px /*the div actual height*/ }
.DivWhichNeedToBeVerticallyAligned{display:inline-block}

другой взлом 

DivParent{height:100px; position:relative}
.DivWhichNeedToBeVerticallyAligned{height:20px; position:absolute; top:50%; margin-top:-10px;}
0 голосов
/ 18 июля 2015

Вот еще один вариант для современных браузеров: 

.child {
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%); 
     transform: translate(-50%, -50%);
}
0 голосов
/ 28 июля 2014

Я использую следующее решение (без позиционирования, без ячейки таблицы / строки таблицы и без высоты строки), поскольку уже более года оно работает с IE 7 и 8. 

<style>
.outer {
    font-size: 0;
    width: 400px;
    height: 400px;
    background: orange;
    text-align: center;
    display: inline-block;
}

.outer .emptyDiv {
    height: 100%;
    background: orange;
    visibility: collapse;
}

.outer .inner {
    padding: 10px;
    background: red;
    font: bold 12px Arial;
}

.verticalCenter {
    display: inline-block;
    *display: inline;
    zoom: 1;
    vertical-align: middle;
}
</style>

<div class="outer">
    <div class="emptyDiv verticalCenter"></div>
    <div class="inner verticalCenter">
        <p>Line 1</p>
        <p>Line 2</p>
    </div>
</div>
...