Для чего используется вертикальное выравнивание в CSS?

Question

Я новичок в мире кодирования, а также CSS, и недавно обнаружил свойство вертикального выравнивания.Прочитав несколько статей о том, что это такое, я все еще не понимаю, для чего это нужно и когда вы его используете?

Насколько я понимаю, он используется для встроенных элементов, таких как текст, изображения и т. Д., А также для текста или других встроенных элементов в таблице.Их нельзя использовать для блочных элементов, таких как div, h1 и т. Д.

Если я правильно понимаю, кроме выравнивания текста по вертикали, чтобы сказать изображение или использования нижнего или верхнего индекса, какой другой цели он служит?1005 *

Answer 1

Он действительно использует вертикальные выравнивающие элементы. Элементы уровня блока будут игнорировать это свойство. Итак, ваше понимание верно.

Этот блог дает некоторую справочную информацию о выравнивании по вертикали с некоторыми примерами. Он в основном используется для вертикального расположения изображения в строке текста. Или заменить атрибут valign в табличных ячейках.

Так что, похоже, вы понимаете это совершенно правильно. См. w3schools для получения подробной информации о свойстве вертикального выравнивания.

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

Answer 2

Другие были в основном правильны относительно вертикального выравнивания. Реальность такова, что это работает, но не так, как вы думаете. Это для встроенных элементов, а не блочных элементов.

В этом случае скрипка стоит тысячи слов. :)

http://jsfiddle.net/JJfuj/

Answer 3

вертикальное выравнивание, которое выполняет W3C и то, как большинство (tm) его интерпретируют, используется / влияет только на элементы, которые являются ячейками таблицы (<td>), а в некоторых браузерах - элементы с объявлением display: table-cell .

В остальное время браузеры игнорируют его.

Answer 4

• Всегда стоит прочитать спецификации, если вы хотите узнать о конкретном свойстве:
  http://www.w3.org/TR/CSS21/visudet.html#propdef-vertical-align

• Обычный вариант использования - вертикальное центрирование (в комбинации с display: table-cell):

  http://jsfiddle.net/7eTb2/

  div {
      background: #ccc;
      width: 200px;
      height: 300px;
      padding: 5px;
  
      display: table-cell;
      vertical-align: middle
  }
  

  Вертикальное центрирование довольно сложно без использования этой техники.

• Еще один распространенный случай использования - это элементы inline или inline-block.
  Смотрите здесь примеры того, что происходит с различными значениями vertical-align: http://www.brunildo.org/test/inline-block.html

• Еще одна хорошая ссылка для чтения: http://css -tricks.com / what-is-vertical-align /

Тем не менее, реальное использование вызывает у меня отклик, см .:

• https://stackoverflow.com/search?tab=votes&q=user%3a405015%20%22vertical-align%3a%20top%22

:)

Answer 5

Вертикальное выравнивание - это то, на что это похоже. Выравнивает элемент по вертикали внутри родительского объекта; однако не все браузеры интерпретируют это одинаково.

Вот немного более подробная информация о доступных значениях параметров.