Css вертикальное выравнивание: Центрирование горизонтальное и вертикальное

Содержание

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

Удивительно (или нет), но инструмент vertical-align на самом деле лучше всего подходит для этой работы. Лучше всего то, что не требуется Javascript.

В следующем примере я помещаю класс outer в середину тела, а класс inner - в середину класса outer .

Предварительный просмотр: http://jsfiddle.net/tLkSV/513/

HTML:

<div>
    <span></span><div>
        <span></span><div>

        </div>
    </div>
</div>

CSS:

html, body {
    height: 100%;
    margin: 0;
    padding: 0; }
#container {
    text-align: center;
    height: 100%; }
span { 
    height: 100%;
    vertical-align: middle;
    display: inline-block; }
.outer {
    width: 100px;
    height: 200px;
    padding: 0;
    border: 1px solid #000;
    vertical-align: middle;
    display: inline-block; }
. inner {
    background: red;
    width: 30px;
    height: 20px;    
    vertical-align: middle;
    display: inline-block; }

Вертикальное выравнивание работает путем выравнивания центров элементов, расположенных рядом друг с другом. Применение вертикального выравнивания к одному элементу абсолютно ничего не делает. Если вы добавите второй элемент, который не имеет ширины, но является высотой контейнера, ваш единственный элемент переместится в вертикальный центр с этим элементом без ширины, тем самым вертикально центрируя его. Единственное требование состоит в том, чтобы вы установили оба элемента в inline (или inline-block) и установили их атрибут вертикального выравнивания в vertical-align: middle .

Примечание:Вы можете заметить в моем коде ниже, что мой тег <span> и тег <div> соприкасаются. Поскольку они оба являются встроенными элементами, пробел фактически добавит пробел между элементом no-width и вашим div,поэтому обязательно оставьте его.

Вертикальное выравнивание изображения внутри div с адаптивной высотой

Вот метод выравнивания встроенных элементов внутри родительского

элемента по горизонтали и вертикали одновременно:

1) в этом подходе мы создаем элемент inline-block (псевдо -) в качестве первого (или последнего) дочернего элемента родителя и устанавливаем его свойство height в значение 100% , чтобы занять всю высоту его родителя .

2) Кроме того, добавление vertical-align: middle удерживает встроенные элементы(-block) В середине линейного пространства. Итак, мы добавляем это объявление CSS к первому ребенку и нашему элементу ( изображению).

3) Наконец, чтобы удалить символ пробела между встроенными элементами(-block) , мы могли бы установить размер шрифта родительского элемента равным нулю на font-size: 0; .

Примечание: я использовал технику замены изображений Николаса Галлахера в следующем.

Каковы преимущества?

  • Контейнер ( родитель) может иметь динамические размеры.
  • Нет необходимости явно указывать размеры элемента изображения.

  • Мы можем легко использовать этот подход для выравнивания элемента <div> по вертикали , который может иметь динамическое содержимое (высота и / или ширина). Но обратите внимание, что вы должны повторно установить свойство font-size div для отображения внутреннего текста. Онлайн-Демо .

<div>
    <div> ... </div>
</div>
.container {
    height: 300px;
    text-align: center;  /* align the inline(-block) elements horizontally */
    font: 0/0 a;         /* remove the gap between inline(-block) elements */
}

.container:before {    /* create a full-height inline block pseudo=element */
    content: ' ';
    display: inline-block;
    vertical-align: middle;  /* vertical alignment of the inline element */
    height: 100%;
}

#element {
    display: inline-block;
    vertical-align: middle;  /* vertical alignment of the inline element */
    font: 16px/1 Arial sans-serif;        /* <-- reset the font property */
}

Выход

Этот раздел не будет отвечать на этот вопрос, поскольку OP уже знает, как создать отзывчивый контейнер. Однако я объясню, как это работает.

Чтобы высота элемента контейнера менялась вместе с его шириной (с учетом соотношения сторон), мы могли бы использовать процентное значение для свойства top/bottom padding .

Процентное значение верхнего / нижнего отступа или полей относится к ширине содержащего блока.

Например:

.responsive-container {
  width: 60%;

  padding-top: 60%;    /* 1:1 Height is the same as the width */
  padding-top: 100%;   /* width:height = 60:100 or 3:5        */
  padding-top: 45%;    /* = 60% * 3/4 , width:height =  4:3   */
  padding-top: 33.75%; /* = 60% * 9/16, width:height = 16:9   */
}

Вот онлайн-демонстрация . Закомментируйте линии снизу и измените размер панели, чтобы увидеть эффект.

Кроме того, мы могли бы применить свойство padding к фиктивному дочернему элементу или псевдо-элементу

:before / :after для достижения того же результата. Но обратите внимание, что в этом случае процентное значение на padding относительно ширины самого .responsive-container .

<div>
  <div></div>
</div>
.responsive-container { width: 60%; }

.responsive-container .dummy {
  padding-top: 100%;    /*  1:1 square */
  padding-top: 75%;     /*  w:h =  4:3 */
  padding-top: 56.25%;  /*  w:h = 16:9 */
}

Демо #1 .
Demo #2 (использование псевдоэлемента :after )

Добавление содержимого

Использование свойства padding-top приводит к огромному пространству в верхней или нижней части содержимого внутри контейнера .

Чтобы исправить это, мы обернули содержимое элементом-оберткой , удалили этот элемент из нормального потока документа с помощью абсолютного позиционирования и , наконец , развернули обертку (используя свойства

top, right, bottom и left ), чтобы заполнить все пространство его родительского контейнера .

Вот и мы:

.responsive-container {
  width: 60%;
  position: relative;
}

.responsive-container .wrapper {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
}

Вот онлайн-демонстрация .


<div>
  <div></div>

  <div>
    <img src="http://placehold.it/150x150" alt="">
  </div>
</div>
.img-container {
  text-align:center; /* Align center inline elements */
  font: 0/0 a;       /* Hide the characters like spaces */
}

.img-container:before {
  content: ' ';
  display: inline-block;
  vertical-align: middle;
  height: 100%;
}

.img-container img {
  vertical-align: middle;
  display: inline-block;
}

Вот рабочая демонстрация .

Очевидно, что вы могли бы избежать использования псевдо-элемента ::before для совместимости с браузером

и создать элемент в качестве первого дочернего элемента . img-container :

<div>
    <div></div>
    <img src="http://placehold.it/150x150" alt="">
</div>
.img-container .centerer {
  display: inline-block;
  vertical-align: middle;
  height: 100%;
}

ОБНОВЛЕННАЯ ДЕМО -ВЕРСИЯ .

Использование свойств

max-*

Чтобы сохранить изображение внутри коробки меньшей ширины, вы можете установить на изображении свойства max-height и max-width :

.img-container img {
    vertical-align: middle;
    display: inline-block;
    max-height: 100%;  /* <-- Set maximum height to 100% of its parent */
    max-width: 100%;   /* <-- Set maximum width to 100% of its parent */
}

Вот обновленная демо -версия .

Как вертикальное выравнивание элементов в div?

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

Чтобы это не происходило, вы можете установить h2 для поведения встроенного потока:

#header > h2 { display: inline; }

Что касается абсолютного позиционирования img внутри div , вам нужно установить содержащий div для «известного размера», прежде чем это будет работать должным образом. По моему опыту, вам также нужно изменить атрибут позиции с значения по умолчанию - положение: относительный работает для меня:

#header { position: relative; width: 20em; height: 20em; }
#img-for-abs-positioning { position: absolute; top: 0; left: 0; }

Если вы можете заставить это работать, вы можете попытаться постепенно удалять атрибуты height, width, position из div.header, чтобы получить минимальные обязательные атрибуты для получения желаемого эффекта.

ОБНОВИТЬ:

Вот полный пример, который работает на Firefox 3:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
          "http://www.
w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <title>Example of vertical positioning inside a div</title> <style type="text/css"> #header > h2 { display: inline; } #header { border: solid 1px red; position: relative; } #img-for-abs-positioning { position: absolute; bottom: -1em; right: 2em; } </style> </head> <body> <div> <img src="#" alt="Image 1" /> <h2>Header</h2> <img src="#" alt="Image 2" /> </div> </body> </html>

Вертикальное выравнивание на CSS, line-height и vertical-align middle

11.07.18 CSS 1054

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

Если сделать выравнивание по горизонтали не составляет особого труда, то вертикальное выравнивание может вызвать затруднения. Такое выравнивание может понадобиться для различных виджетов на сайте, например, нужно выровнять картинку строго по середине. Рассмотрим, как решить задачу вертикального выравнивания.

Раньше страницы верстались при помощи таблиц (табличная верстка), сейчас же принято использовать блочную верстку на основе тегов div (блочная верстка). Это значит, что таблицы сегодня лучше не использовать для создания блоков, хотя выровнять содержимое ячейки таблицы раньше было совсем просто, чего не сказать о выравнивании в блоке div. При табличной верстке активно использовали атрибут valign.

Но решения есть. Для вертикального выравнивания в элементах можно использовать некоторые методы. Например, метод line-height. Он больше подойдет для выравнивания строки текста. Данный метод работает во всех браузерах. Значение 100px в этом примере выбрано произвольно, подберите нужное для себя самостоятельно, в зависимости от потребностей.

<div>
	<div>Строка текста</div>
</div>

.child {
    line-height: 100px;
}

Другой способ заключается в следующем. Если для выравнивания содержимого блока по горизонтали служит CSS свойство text-align: center, то для вертикального выравнивания есть свойство vertical-align: middle. Это свойство работает только для строчных элементов, но можно адаптировать и для блочных. Это ответ на вопрос, почему не работает vertical-align: middle, который часто можно встретить на различных форумах и порталах. Нужно сделать специальный стиль отображения такого блока с помощью свойства display, пример ниже:

<div>
	<div>Содержимое</div>
</div>

.parent {
	display: table;
}
. child {
    display: table-cell;
    vertical-align: middle;
}

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

align | HTML и CSS с примерами кода

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

Колонки и таблицы

Синтаксис

/* keyword values */
vertical-align: baseline;
vertical-align: sub;
vertical-align: super;
vertical-align: text-top;
vertical-align: text-bottom;
vertical-align: middle;
vertical-align: top;
vertical-align: bottom;

/* <length> values */
vertical-align: 10em;
vertical-align: 4px;

/* <percentage> values */
vertical-align: 20%;

/* Global values */
vertical-align: inherit;
vertical-align: initial;
vertical-align: unset;

Значения

baseline
Выравнивает базовую линию блока по базовой линии родителя. Если у блока нет базовой линии, то за неё принимается нижняя граница.
bottom
Выравнивает низ блока по нижней части строки.
middle
Выравнивает вертикальную среднюю точку блока по базовой линии родительского блока плюс половина высоты буквы «x».
sub
Опускает базовую линию блока вниз для создания нижнего индекса. Не оказывает влияние на размер текста.
super
Поднимает базовую линию блока вверх для создания верхнего индекса. Не оказывает влияние на размер текста.
text-bottom
Нижняя граница элемента выравнивается по нижнему краю содержимого родителя.
text-top
Верхняя граница элемента выравнивается по верхнему краю содержимого родителя.
top
Выравнивает верх блока по верхней части строки.

В качестве значения также можно использовать проценты, пиксели или другие доступные единицы. Положительное число смещает элемент вверх относительно базовой линии, в то время как отрицательное число опускает его вниз. При использовании процентов, отсчёт ведётся от значения свойства line-height, при этом 0% аналогично значению baseline.

Для выравнивания по вертикали в ячейках таблицы применяются следующие значения:

baseline
Выравнивает базовую линию ячейки с базовой линией первой текстовой строки или другого вложенного элемента.
bottom
Выравнивает по нижнему краю ячейки.
middle
Выравнивает по середине ячейки.
top
Выравнивает содержимое ячейки по её верхнему краю.

Значение по-умолчанию: baseline

Применяется к строчным элементам или ячейкам таблицы

Спецификации

Описание и примеры

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>vertical-align</title>
    <style>
      . tex {
        font-size: 2rem;
      }
      .tex sub {
        vertical-align: sub;
        font-size: 1.8rem;
      }
      .tex sup {
        vertical-align: 5px;
        font-size: 1.6rem;
      }
    </style>
  </head>
  <body>
    <div>
      T<sub>E</sub>X и L<sup>A</sup>T<sub>E</sub>X
    </div>
  </body>
</html>

CSS свойство вертикального выравнивания


Пример

Выровнять изображение по вертикали:

img.a {
vertical-align: baseline;
}

img.b {
vertical-align: text-top;
}

рис. C {
вертикальное выравнивание: нижний текст;
}

рис.d {
вертикальное выравнивание: суб;
}

img.e {
vertical-align: super;
}

Попробуй сам "

Определение и использование

Свойство vertical-align устанавливает вертикальное выравнивание элемента.


Поддержка браузера

Числа в таблице указывают первую версию браузера, полностью поддерживающую свойство.

Объект
с выравниванием по вертикали 1,0 4,0 1,0 1,0 4,0


Синтаксис CSS

вертикальное выравнивание: базовая линия | length | sub | super | top | text-top | middle | bottom | text-bottom | initial | наследовать;

Стоимость недвижимости

Значение Описание Играй
базовый Элемент выровнен по базовой линии родительского элемента.Это значение по умолчанию Играй »
длина Поднимает или опускает элемент на указанную длину. Допускаются отрицательные значения. Подробнее о единицах длины Играй »
% Поднимает или опускает элемент в процентах от "line-height". имущество. Допускаются отрицательные значения Играй »
переходник Элемент выровнен по базовой линии индекса родительского элемента Играй »
супер Элемент выровнен по базовому верхнему индексу родительского элемента Играй »
верх Элемент выровнен по верхнему краю самый высокий элемент на линии Играй »
текст вверху Элемент выровнен по верхнему краю шрифт родительского элемента Играй »
средний Элемент помещается в середину родительского элемента Играй »
низ Элемент выровнен по нижний элемент в строке Играй »
текст внизу Элемент выровнен по нижняя часть шрифта родительского элемента Играй »
начальный Устанавливает для этого свойства значение по умолчанию. Читать про начальные Играй »
наследовать Наследует это свойство от своего родительского элемента. Читать про наследство

Связанные страницы

Учебник

CSS: Текст CSS

Ссылка на HTML DOM: свойство verticalAlign



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

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



Синтаксис: vertical-align:
Возможные значения: базовый уровень | суб | супер | наверх | текст вверху | средний | внизу | текст внизу | <процент>
Начальное значение: исходный
Применимо к: Рядные элементы
Унаследовано:

Свойство vertical-align можно использовать для изменения вертикального позиционирования встроенного элемента относительно его родительского элемента или линии элемента. (Встроенный элемент - это элемент, у которого нет разрыва строки до и после него, например EM , A и IMG в HTML.)

Значение может быть в процентах относительно свойства line-height элемента, которое поднимет базовую линию элемента на указанную величину выше базовой линии родителя. Допускаются отрицательные значения.

Значение также может быть ключевым словом. Следующие ключевые слова влияют на позиционирование относительно родительского элемента:

  • базовая линия (выровнять базовые линии элемента и родительского элемента)
  • средний (выровняйте вертикальную среднюю точку элемента с базовой линией плюс половина x-height - высота буквы «x» - родительского элемента)
  • подстрочный (подстрочный)
  • супер (верхний индекс)
  • text-top (выравнивание верха элемента и родительского шрифта)
  • text-bottom (выровнять нижнюю часть элемента и родительский шрифт)

Ключевые слова, влияющие на позиционирование относительно линии элемента:

  • верх (совместить верх элемента с самым высоким элементом на линии)
  • нижний (выровнять нижнюю часть элемента с нижним элементом на линии)

Свойство vertical-align особенно полезно для выравнивания изображений. Ниже приведены некоторые примеры:

  IMG.middle {vertical-align: middle}
IMG {vertical-align: 50%}
.exponent {vertical-align: super}  

Индекс CSS ~ Структура CSS ~ CSS свойства


Дом, Форумы, Справка, Инструменты, FAQs, Статьи, Дизайн, Ссылки

Copyright © 1996 - 2006. Все права защищены.

Свойства CSS / Стили фреймов / вертикальное выравнивание iframe

вертикальное выравнивание: ***;

Свойство vertical-align указывает вертикальное выравнивание.

Вертикальное выравнивание iframe можно указать, применив это свойство к элементу IFRAME.

 
  #example {
вертикальное выравнивание: по центру;
}  
 
Объект Значение Пояснение
с выравниванием по вертикали базовый выравнивается по базовой линии родительского элемента (по умолчанию)
верх выравнивается по верхнему краю строки
текст вверху выравнивается по верхнему краю шрифта родительского элемента
средний выравнивается по середине строки
низ выравнивается по нижней части строки
текст внизу выравнивается по нижнему краю шрифта родительского элемента
длина поднимает или опускает элемент на длину
baseline = 0
положительное значение: увеличивает
отрицательное значение: уменьшает
% повышает или понижает элемент на процентное значение
baseline = 0% (100% = одна высота строки)
положительное значение: увеличивает
отрицательное значение: понижает
О базовом уровне

Пример

 


 Указатель тегов 






baseline

вверху

text-top

в середине

внизу

нижний текст

-30px

200%

Выход

базовый

верх

текст вверху

средний

низ

нижний текст

-30 пикселей

200%

Стили рамок
Связанный документ

CSS Align - TutorialBrain

На главную »CSS» CSS Выровнять

Выравнивание CSS - это способ выравнивания элементов HTML.

По сути, это способ организации элементов. Важные выравнивания:

  • CSS Text align
  • CSS Vertical Align
  • CSS image align
  • CSS align div
  • CSS Table align
  • CSS float align

Есть 3 важных способа выровнять текст.

  • По левому краю - выравнивание текста по левому краю.
  • Выровнять по центру - для выравнивания текста по центру.
  • Выровнять по правому краю - выравнивание текста по правому краю.
  • Выровнять по одинаковой ширине линии - чтобы выровнять текст, растягивая и делая все строки одинаковой длины.

Синтаксис выравнивания текста:
выравнивания текста : слева ;
выравнивание текста : центр ;
выравнивание текста : вправо ;
выравнивание текста : выравнивание ;

 # text-align-left {
  выравнивание текста: слева;
  фон: цвет морской волны;
  красный цвет;
}

# text-align-center {
  выравнивание текста: центр;
  фон: желтый;
  цвет синий;
}

# text-align-right {
  выравнивание текста: вправо;
  фон: розовый;
  цвет: зеленый;
}
 

CSS выровнять по центру с использованием полей и ширины

Теперь, как еще можно выровнять div по центру по горизонтали?

Для этого мы можем добавить поле и фиксированную ширину к div, чтобы div не стал гибким.

Поле margin: auto используется вдоль свойства width для выравнивания элемента, такого как div (или контейнер).

margin: auto автоматически добавляет соответствующие поля, в то время как свойство width дает фиксированную ширину для div, чтобы div не расширялся.

Теперь, как еще можно выровнять div по центру по горизонтали?

Для этого мы можем добавить поле и фиксированную ширину к div, чтобы div не стал гибким.

Поле margin: auto используется вдоль свойства width для выравнивания элемента, такого как div (или контейнер).

margin: auto автоматически добавляет соответствующие поля, в то время как свойство width дает фиксированную ширину для div, чтобы div не расширялся.

Примечание / информация:

Если вы хотите выровнять div по центру, то одним из способов добиться этого является кодирование margin: auto вместе с ненулевым значением width: x (all действующие единицы) .

Ширина должна быть больше 0% и меньше 100%

 .margin-auto {
  маржа: авто;
  ширина: 45%;
  цвет фона: черный;
  цвет: желтый;
}
 

В CSS. Один из самых популярных способов выровнять изображение по центру - выполнить следующие 2 шага:

  1. Установите автоматическое поле с помощью поля : auto . Если вы хотите выровнять только по горизонтали по центру, установите margin-left: auto & ma rgin-right: auto.
  2. Разрешить элементу изображения начинаться с новой строки и занимать всю ширину. Это устанавливается с помощью дисплея : блок
 # margin-block {
  фон: фиолетовый;
  маржа: авто;
  дисплей: блок;
  ширина: 50%;
  высота: 60%;
}
 

CSS Text vertical-align устанавливает вертикальное расположение текста.

Синтаксис CSS Вертикальное выравнивание текста:

vertical-align: length; / * Здесь длина - это все применимые единицы измерения * /
vertical-align: baseline; / * Устанавливает элемент на основе управления родительским элементом * /
vertical -align: x%; / * x может быть положительным или отрицательным * /
/ * Если x> 0, текст упорядочивает себя на x% вверх
Если x <0, текст упорядочивает себя на x% вниз * /
vertical-align: middle; / * выравнивается по вертикали по направлению к середине родительского элемента * /
vertical-align: sub; / * выравнивание по вертикали как нижний индекс родительского элемента * /
vertical-align: super; / * выравнивается по вертикали как верхний индекс родительского элемента * /
vertical-align: bottom; / * для выравнивания текста внизу.В основном используется в таблицах * /
Другие менее используемые синтаксисы: :
vertical-align: top;
выравнивание по вертикали: верхний край текста;
выравнивание по вертикали: нижний текст;

 #vertical_align_length {
  вертикальное выравнивание: 30 пикселей;
}

#vertical_align_baseline {
  вертикальное выравнивание: базовая линия;
}

# vertical_align_percent1 {
  вертикальное выравнивание: 30%;
}

# vertical_align_percent2 {
  вертикальное выравнивание: -40%;
}

#vertical_align_middle {
  вертикальное выравнивание: по центру;
}

#vertical_align_sub {
  вертикальное выравнивание: суб;
}

#vertical_align_super {
  вертикальное выравнивание: супер;
}
 

В предыдущем примере мы видели вертикальное выравнивание текстов в абзаце.

Точно так же есть способы вертикального выравнивания в div. Часто от нас требуется вертикальное выравнивание текста по центру div. Давайте посмотрим, как это сделать -

 а) выравнивание по вертикали: по центру;
 

Выравнивает текст по вертикали по центру. В предыдущем примере один из абзацев также использует свойство vertical-align: middle . Это работает даже для изображений, поэтому вы можете попробовать установить этот стиль и для своего тега «img».

Примечание / информация:
Если вы хотите центрировать текст на изображении, вы можете закодировать с выравниванием по вертикали , а также с высотой строки . Высота строки должна быть на больше или равна высоте изображения.

Это позволит выровнять одну строку текста по вертикали по центру.

Обычно это будет работать лучше, если вы установите высоту строки больше, чем размер шрифта текста, или высоту строки, равную высоте контейнера div.

  • Еще один момент, на который следует обратить внимание: этот процесс может не работать, если у вас более 1 строки текста.
  • Мы не рекомендуем использовать этот метод для центрирования текста на изображении, так как это усложнит вашу задачу.

Пример использования line-height для вертикального центрирования

 # parent-height {
  фон: розовый;
  высота: 150 пикселей;
  ширина: 400 пикселей;
  выравнивание текста: центр;
}

# child-line-height {
  высота строки: 150 пикселей;
}
 
 c)  Родительский div :
   дисплей: таблица;

     Детский div :
   дисплей: таблица-ячейка;
   вертикальное выравнивание: по центру;
 

Это работает, когда у вас есть родительский div и с этим родительским div связан дочерний div.

Итак, вы должны определить родительский div с display: table . Кроме того, вы должны закодировать дочерний div с помощью - display: table-cell & vertical-align: middle вместе.

Это один из наиболее эффективных способов выравнивания текста в div, который также имеет дочерний div.

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

Другой способ выровнять элемент по вертикали (или даже по горизонтали) - использовать свойство padding с text-align.

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

Аналогично, для выравнивания по центру по горизонтали, Вам необходимо установить равное значение заполнения для левого и правого с text-align: center , но используйте это с умом только для определенных требований.

 .v-align-padding {
  отступ: 20 пикселей 0;
  выравнивание текста: центр;
  граница: сплошной синий цвет 3px;
}

.h-align-padding {
  отступ: 0px 50px;
  выравнивание текста: центр;
  граница: сплошной розовый 3px
}

. h-v-align-padding {
  отступ: 22px 50px;
  выравнивание текста: центр;
  граница: сплошной желтый цвет 3px;
}
 

Как мы видели, мы можем выровнять элемент по центру. Точно так же мы можем выровнять элементы по левому и правому краю. Важные способы достижения этого -

  • CSS Position property
  • CSS float

CSS выровнять по левому краю с использованием свойства позиции

В начале этой страницы мы увидели, как выровнять текст по левому краю с помощью свойства text-align: left .

Таким же образом мы можем выровнять изображение по правому краю, таблицу вправо, согнуть вправо или div, используя свойство position: absolute , и установить свойства left или right для выравнивания по левой или правой стороне по горизонтали. .

CSS выровнять по правому краю, используя свойство position

мы можем использовать свойство position: absolute и установить свойства left или right для выравнивания по левой или правой стороне по горизонтали.

TutorialBrain не рекомендует использовать position: absolute для выравнивания по левому или правому краю, так как это может привести к перекрытию элементов .

Пример выравнивания по левому и правому краю с использованием позиции: абсолютное

 .absolute-right {
  позиция: абсолютная;
  вправо: 0 пикселей;
  ширина: 45%;
  фон: # 25e1a5;
}

.absolute-left {
  позиция: абсолютная;
  слева: 0px;
  ширина: 45%;
  фон: # ef1cd0;
}
 

Выровнять по левому и правому краю с помощью поплавка

Свойство CSS float управляет плавным перемещением элементов.

  1. float: left - Чтобы переместить элемент (например, div) влево.
  2. float: right - Для смещения элемента (например, div) вправо.
 .val1 {
плыть налево;
цвет фона: Темно-бирюзовый;
отступ: 30 пикселей;
}
. val2 {
float: right;
цвет фона: оранжевый;
отступ: 30 пикселей;
}
 

Интервью Вопросы и ответы CSS

Text-align:
В CSS свойство text-align используется для выравнивания текста по левому, правому краю, по центру или для выравнивания по центру текста, предоставляя равное пространство слева и справа.
Синтаксис :

  • выравнивание текста: слева;
  • выравнивание текста: вправо;
  • выравнивание текста: по центру;
  • выравнивание текста: выравнивание;

Свойство Vertical-align
vertical-align: middle;

CSS Text vertical-align устанавливает вертикальное расположение текста.

Чтобы выровнять изображение по центру, мы можем использовать эти два метода:

Установите автоматическое поле с помощью параметра margin: auto. Если вы хотите выровнять только по центру по горизонтали, установите margin-left: auto и margin-right: auto.

OR

Разрешить элементу изображения начинаться с новой строки и занимать всю ширину. Это устанавливается с помощью display: block.

Мы можем выровнять текст по левому, правому краю, по центру и выровнять текст с помощью свойства CSS Align
align: left; - выровнять по левому краю.
выровнять: по центру; - выровнять по центру.
выровнять: вправо; - выровнять по правому краю.
выровнять: по ширине; - растянуть все линии одинаково.

html - Как мне вертикально выровнять текст в div?

Есть несколько уловок для отображения содержимого или изображения в центре div.Некоторые ответы действительно хороши, и я тоже полностью согласен с ними.

Абсолютное горизонтальное и вертикальное центрирование в CSS

http://www.css-jquery-design.com/2013/12/css-techniques-absolute-horizontal-and-vertical-centering-in-css/

Имеется более 10 методик с примерами. Теперь вам решать, что вы предпочитаете.

Без сомнения, дисплей: стол; display: table-Cell - лучший трюк.

Вот несколько хороших приемов:

Уловка 1 - Используя дисплей : таблица; дисплей: таблица-ячейка

HTML

  
СОДЕРЖАНИЕ

Код CSS

 .Center-Container.is-Table {display: table; }
.is-Table .Table-Cell {
  дисплей: таблица-ячейка;
  вертикальное выравнивание: по центру;
}
.is-Table .Center-Block {
  ширина: 50%;
  маржа: 0 авто;
}
  

Уловка 2 - Используя дисплей : встроенный блок

HTML

  
СОДЕРЖАНИЕ

Код CSS

  .Center-Container.is-Inline {
  выравнивание текста: центр;
  перелив: авто;
}

.Center-Container.is-Inline: после,
.is-Inline . Center-Block {
  дисплей: встроенный блок;
  вертикальное выравнивание: по центру;
}

.Center-Container.is-Inline: после {
  содержание: '';
  высота: 100%;
  маржа слева: -0,25em; / * Для смещения интервала. Может отличаться в зависимости от шрифта * /
}

.is-Inline .Center-Block {
  максимальная ширина: 99%; / * Предотвращает проблемы с длинным содержимым, заставляет блок содержимого перемещаться наверх * /
  / * max-width: calc (100% - 0,25em) / * Только для Internet & nbsp; Explorer 9+ * /
}
  

Уловка 3 - Используя положение: относительное; положение: абсолютное

  
АБСОЛЮТНЫЙ ЦЕНТР,

В КОНТЕЙНЕРЕ.

Этот блок абсолютно центрирован по горизонтали и вертикали внутри своего контейнера

CSS свойство vertical-align - Tutorial Republic

Тема: Справочник по свойствам CSS3 Пред. | След.

Описание

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

В следующей таблице приведены контекст использования и история версий этого свойства.

Значение по умолчанию: базовый
Применимо к: Элементы встроенного уровня и ячейки таблицы
Унаследовано: Нет
Анимация: Да. См. анимируемые свойства .
Версия: CSS 1, 2, 3

Синтаксис

Синтаксис свойства задается следующим образом:

 выравнивание по вертикали: 
базовый уровень | суб | супер | наверх | текст вверху | средний | внизу | текст внизу | длина | процентов | начальная | унаследовать

В приведенном ниже примере показано свойство vertical-align в действии.

  img {
    вертикальное выравнивание: по центру;
}
охватывать {
    вертикальное выравнивание: супер;
}  

Значения собственности

В следующей таблице описаны значения этого свойства.

Значение Описание
базовый Совместите базовую линию блока элемента с базовой линией родительского блока.
переходник Опустите базовую линию прямоугольника до положения, подходящего для нижних индексов родительского прямоугольника.
супер Поднимает базовую линию блока до положения, подходящего для верхних индексов родительского блока.
верх Совместите верх элемента и его потомков с верхом линейного блока.
текст вверху Выровняйте верх элемента по верхнему краю шрифта родительского элемента.
средний Совместите середину элемента с точкой, которая на половину высоты родительского элемента по оси x выше базовой линии родительского блока.
нижняя Совместите нижнюю часть элемента и его потомков с нижней частью линейного блока.
текст внизу Выровняйте нижнюю часть элемента по нижней части шрифта родительского элемента.
длина Значение длины в пикселей , pt , см , em и т. Д. Значения длины увеличивают (положительное значение) или опускают (отрицательное значение) прямоугольник на это расстояние от базовой линии его родительского элемента.Значение 0px совпадает с базовым значением .
в процентах Поднять (положительное значение) или уменьшить (отрицательное значение) прямоугольник на это расстояние (процент от значения line-height ). Значение 0% совпадает с исходным значением .
начальная Устанавливает для этого свойства значение по умолчанию.
наследовать Если указано, связанный элемент принимает вычисленное значение свойства своего родительского элемента vertical-align .

Совместимость с браузером

Свойство vertical-align поддерживается во всех основных современных браузерах.

Базовая поддержка -

  • Firefox 1+
  • Google Chrome 1+
  • Internet Explorer 4+
  • Apple Safari 1+
  • Opera 4+

Дополнительная литература

См. Учебник по: Выравнивание CSS.

Связанные свойства: line-height .

CSS свойство vertical-align | DigitalOcean

Хотя в этом руководстве содержится контент, который, по нашему мнению, принесет большую пользу нашему сообществу, мы еще не тестировали или отредактировал его, чтобы обеспечить безошибочное обучение. Это в нашем списке, и мы над этим работаем! Вы можете помочь нам, используя кнопку «сообщить о проблеме» в нижней части руководства.

Введение

vertical-align определяет вертикальное выравнивание содержимого ячейки таблицы или встроенного элемента относительно остальной части встроенного потока.

vertical-align может принимать значение длины %, или , либо может принимать одно из следующих 8 ключевых слов:

  • baseline : значение по умолчанию. Базовая линия элемента выровнена по базовой линии родительского элемента.
  • нижний : нижний край элемента выровнен по нижнему краю строки.
  • средний : середина элемента, выровненная по половине высоты x родительского элемента. Высота по оси x - это высота текста без верхних и нижних нижних и нижних символов.
  • sub : базовая линия элемента, выровненная по базовой линии нижнего индекса родительского элемента.
  • super : базовая линия элемента, выровненная по базовой линии верхнего индекса родительского элемента.
  • text-bottom : нижняя часть элемента выровнена по нижнему краю текста.
  • text-top : верх элемента выровнен по верхнему краю текста.
  • верх : верх элемента, выровненный по верхнему краю строки.

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

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

Вот пример использования vertical-align:

  .avatar {
  вертикальное выравнивание: по центру;
}
  

Примеры

Может быть трудно визуализировать эффекты различных значений ключевых слов для вертикального выравнивания, поэтому вот примеры с встроенными смайликами морской ракушки (🐚), помещенными с разными значениями:

vertical-align: baseline

Сэмми продает ракушки 🐚 на берегу моря.

с выравниванием по вертикали: снизу

Сэмми продает ракушки 🐚 на берегу моря.

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

Сэмми продает ракушки 🐚 на берегу моря.

vertical-align: sub

Сэмми продает ракушки 🐚 на берегу моря.

с выравниванием по вертикали: super

Сэмми продает ракушки 🐚 на берегу моря.

vertical-align: text-bottom

Сэмми продает ракушки 🐚 на берегу моря.

vertical-align: text-top

Сэмми продает ракушки 🐚 на берегу моря.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *