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

Question

У меня есть img в плавающем div, и я не знаю, как его центрировать по вертикали.

<div style="height: 300px">
   <img style="height: 50px" src="something" />
</div>

вертикальное выравнивание: середина курса не работает.

http://jsfiddle.net/wKQYj/

Answer 1

Чтобы выровнять текст по вертикали внутри родительского элемента и иметь в виду, что img является встроенным элементом и поэтому ведет себя аналогично тексту, вы можете просто установить line-height вheight родительского элемента:

div {
    height: 300px;
    line-height: 300px;
}

JS Fiddle demo .

Answer 2

Стиль CSS vertical-align определяет выравнивание текста в его текстовой строке.Это позволяет вам указывать текст как верхний или нижний индекс, например.

Так что на самом деле он не предназначен для вертикального выравнивания элемента внутри блока.

Существует явное исключение из этого,однако - ячейки таблицы (т.е. элементы <td> и <th>) используют стиль vertical-align, чтобы сделать именно это: выровнять содержимое ячейки внутри ячейки.

Это исключение является чем-то странным- это действительно не должно существовать.CSS-дизайнеры поместили его туда, чтобы позволить CSS воспроизводить атрибут valign элементов таблицы, который обычно использовался дизайнерами в старые времена темных макетов на основе таблиц.

Для других элементовВыравнивание содержимого прямоугольника по центру может быть чем-то вроде изобразительного искусства.Есть несколько методов:

1. Для отдельных строк текста просто сделайте line-height такой же, как высота всего блока.Возможно, вам даже не понадобится vertical-align.

2. Используйте display:table-cell;, чтобы элемент имитировал ячейку таблицы, а затем используйте vertical-align.Это работает, но может иметь непредвиденные последствия (есть другие атрибуты ячеек таблицы, которые вы, возможно, не хотите имитировать).

3. Если вы знаете высоту элемента, который хотите выровнять по вертикалиВы можете расположить его на 50% минус половина его высоты, например:

   position:absolute;
   top:50%;
   height:200px;
   margin-top:-100px; /* half the height */
   

Есть несколько других, но они должны помочь вам начать.

Надеюсь, это поможет.

Answer 3

Для более современного (IE8 +) решения, в котором не используются таблицы, мне нравится это best.

<style>
/* Can be any width and height */
.block {
  height:500px;
  text-align: center;
}

/* The ghost, nudged to maintain perfect centering */
.block:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -0.25em; /* Adjusts for spacing */
}

/* The element to be centered, can be any width or height */ 
.centered {
  display: inline-block;
  vertical-align: middle;
  width: 300px;
}
</style>

<div class="block"><div class="centered">Centered Content</div></div>

Answer 4

Свойство

vertical-align действительно хорошо подходит только для td элементов.Попробуйте что-то вроде:

<table>
 <tr>
  <td style='height:300px; vertical-align:center'>
   <img src='something'>
  </td>
 </tr>
</table>

ИЛИ, поскольку вы знаете высоту и ширину img:

<div style='height:300px;'>
 <img style='height:50px; position:relative; top:50%; margin-top:-25px'>
</div>

Answer 5

Используйте свойство translate, это просто и работает даже в IE:

img {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

Answer 6

Я использую свойство display: box:

#container {
    display: box;
    box-orient: vertical;
    box-pack: center;  
}

#text {
    vertical-align: middle;
}

См. Js-fiddle здесь: verical align js-fiddle

Answer 7

Довольно классный и современный подход (с указанием высоты):

.Absolute-Center {
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
}

Answer 8

Javascript, вероятно, будет лучшим решением для центрирования изображения по центру по вертикали для каждого случая.если вы можете использовать такую ​​библиотеку, как jQuery, это всего лишь несколько строк кода.

$(function(){
    var containerHeight = $('#container').outerHeight();
    var imgHeight = $('#logo img').outerHeight();

    var difference = (containerHeight - imgHeight)/2;
    $('#logo img').css({'position' : 'relative', 'top' : difference + 'px'});

});

Answer 9

Я использую flex для центрирования элемента. Эффективно делает страницу более отзывчивой.

div {
    display: flex;
    align-items: center;
}

Пожалуйста, посмотрите здесь , чтобы узнать, как центрировать вертикально.