Все про css выравнивание

Содержание:

transform: translate()

Свойство CSS позволяет двигать, вращать, изменять размер и форму элемента. Этот инструмент настоящий must have для создания современных адаптивных и интерактивных дизайнов. Поэтому ему будет посвящена отдельная статья (а может и две 😉

В рамках этой статьи рассмотрим использование свойства c функцией в качестве значения. Суть метода сводится к следующему:

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

Или не совсем по центру? Дело в том, что по центру выравнивается левый верхний угол блока (так сказать, начало его координат). Если блок имеет фиксированный размер и он нам известен, можно сдвинуть его (блок) на расстояние равное половине размера при помощи свойства

Итак, мы выровняли элемент по центру. Или не совсем по центру? Дело в том, что по центру выравнивается левый верхний угол блока (так сказать, начало его координат). Если блок имеет фиксированный размер и он нам известен, можно сдвинуть его (блок) на расстояние равное половине размера при помощи свойства .

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

Как реализовать межстрочный интервал HTML

Вы можете управлять междустрочным интервалом абзаца с помощью style=line-height. Используйте атрибут style со следующими значениями:

line-height: normal|number|length|initial|inherit;

Ниже приведен пример HTML-кода, который выводит абзацы с различными междустрочными интервалами:

<!Doctype html><html><head><title>Установка междустрочного интервала с помощью атрибута Style</title></head>
<body>
<p style=”line-height:1.5; text-align:justify”>В этом параграфе используются два значения для атрибута style. Первый line-height:1.5 определяет полуторный междустрочный интервал для абзаца, а второе значение text-align:justify определяет, что текст абзаца должен распределяться по ширине. </p>
<p style=”line-height:2; text-align:justify”>Этот абзац имеет двойной междустрочный интервал и выровнен по ширине. line-height:2 определяет двойной интервал. Атрибут style не обязательно должен иметь два значения. Но если вам нужно задать два значения, вы можете сделать это, разделив их точкой с запятой. </p>
</body>
</html>

Ниже приведено несколько различных способов использования значения line-height для атрибута style:

<p style=”line-height: 13px”>: Устанавливает межстрочный интервал 13 пикселей; <p style=”line-height:200%”>: Устанавливает в HTML расстояние между абзацами в 200% относительно текущего размера шрифта; <p style=”line-height:14px”>: Устанавливает высоту строки 14 пикселей.

Property Values

Value Description Play it
stretch Default value. Lines stretch to take up the remaining space Play it »
center Lines are packed toward the center of the flex container Play it »
flex-start Lines are packed toward the start of the flex container Play it »
flex-end Lines are packed toward the end of the flex container Play it »
space-between Lines are evenly distributed in the flex container Play it »
space-around Lines are evenly distributed in the flex container, with half-size spaces on either end Play it »
space-evenly Lines are evenly distributed in the flex container, with equal space
around them
Play it »
initial Sets this property to its default value. Read about initial Play it »
inherit Inherits this property from its parent element. Read about inherit

CSS — Выравнивание по вертикали

1. Отцентровать один элемент (, ) относительно другого (в котором он расположен) по центру. Родительский блок в этом примере имеет фиксированную высоту, которая задаётся с помощью свойства CSS .

HTML-код:

<div class="parent">
  ...
  <div class="child">
    ...
  </div>
</div>  

CSS-код:

.parent {
  line-height: 500px;
}
.child {
  display: inline-block;
  vertical-align: middle;
}

Браузеры, которые поддерживают данное решение:

  • Chrome 1.0+
  • Firefox 3.0+
  • Internet Explorer 8.0+
  • Opera 7.0+
  • Safari 1.0+

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

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

Браузеры, которые поддерживают данное решение:

  • Chrome 1.0+
  • Firefox 1.0+
  • Internet Explorer 8.0+
  • Opera 7.5+
  • Safari 1.0+

Изображения

Слайд-шоуГалерея слайд-шоуМодальные изображенияЛайтбоксАдаптивная Сетка изображенияСетка изображенияГалерея вкладокОверлей изображенияСлайд с наложенным изображениемМасштабирование наложения изображенияНазвание наложения изображенияЗначок наложения изображенияЭффекты изображенияЧерно-белое изображениеТекст изображенияТекстовые блоки изображенийПрозрачный текст изображенияПолное изображение страницыФорма на картинкеГерой изображениеПараллельные изображенияОкругленные изображенияАватар изображенияАдаптивные образыЦентрировать изображенияМиниатюрыПознакомьтесь с командойЛипкое изображениеОтражение изображенияВстряхните изображениеПортфолио галереяПортфолио с фильтрациейМасштабирование изображенияИзображение увеличительное стеклоПолзунок сравнения изображений

Шаг 3

И последнее что мы сделаем, это добавим кое-какие стили, чтобы страничка выглядела немного привлекательнее. Давайте начнём с меню.

Первое что мы сделали, чтобы меню выглядело лучше, удалили маркеры, установив атрибут list-style:none, а также установили внутренние и внешние отступы, так как по умолчанию в разных броузерах они сильно различаются.

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

Другая интересная вещь, которую мы использовали для меню — это псевдо-классы :before и :after. Они позволяют вам добавить что-нибудь перед и после элемента. Это хороший способ добавлять иконки или символы, такие как стрелочка в конце каждой ссылки. Такой трюк не работает в Internet Explorer 7 и ниже.

Вариант 2

Для центровки блоков придумано очень много способов. А вот если нужно центровку сделать более умной, тут приходиться поломать голову. К счастью, я вывел один интересный способ для следующих целей:

Как выровнять все блоки div по центру так, чтобы блок на следующей строке выравнивался по левому краю?

Имеем следующую структуру:

<div class=»archive-container-for-articles»>     <article class=»archive-article»>     Блок 1     </article>     <article class=»archive-article»>     Блок 2     </article>     <article class=»archive-article»>     Блок 3     </article>     <article class=»archive-article»>     Блок 4     </article>     <article class=»archive-article»>     Блок 5     </article> </div>

Для них прописываем классы:

.archive-container-for-articles {     width: 90%;     margin: 0 auto; } .archive-article {     display: inline-block;     vertical-align: top;     width: calc(33.3333% — ( 0.666666666667 * 36px ) );     margin: 0 10px 0 11px; }

Следует обратить внимание, что если менять размеры calc, то затем надо подстраивать экспериментальным путём размеры margin. Иначе блоки не будет располагаться по центру

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

Применив технику выше, мы получим адаптивную вёрстку, со всеми равными краями, которая не будет портиться при изменении размеров экрана.

А если мы хотим, чтобы на мобильной версии было не 3 блока, а 2, то в ccs для разрешения 768 пикселей, разобьём блоки иначе:

@media screen and (max-width: 768px) {     .archive-article {         width: calc(47.3333% — ( 0.666666666667 * 25px ) );         margin: 0 10px 0 20px;     } }

Получим те же блоки в мобильном варианте, но уже по два блока на строку:

5-ый метод

С помощью этого метода можно выровнять по центру одну строку текста. Просто устанавливаем высоту текста (line-height) равной высоте элемента (height). После этого строка будет выведена по центру.

Минусы

  • Работает только с текстом (не работает с блочными элементами).
  • Если текста больше чем одна строка, то выглядит очень плохо.

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

Теперь вы знаете как добиться вертикального выравнивания по центру, давайте сделаем простой web-сайт, который, в конце-концов будет выглядеть так:

Метод таблиц CSS

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

Примечание: Таблица CSS не является тем же, что и HTML таблица.

CSS:

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

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

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

Недостатком данного метода является то, что он не работает в старых версиях IE. Приходится использовать свойство display: inline-block для вложенного контейнера.

Абсолютное позиционирование и растягивание

В коде примера выполняется центрирование по вертикали и горизонтали.

CSS:

#parent {position: relative;}
#child {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	width: 50%;
	height: 30%;
	margin: auto;
}

Идея данного метода заключается в том, чтобы растянуть вложенный элемент до всех 4 границ родительского элемента с помощью установки свойствам top, bottom, right, и left значения 0.

Установка автоматического формирования полей по всем сторонам приведет к заданию равных значений по всем 4 сторонам и выведет наш вложенный элемент div по центру родительского элемента.

К сожалению, данный метод не работает в IE7 и ниже.

Выравнивание блоков с известными размерами

Проще всего с помощью CSS выровнять блоки, у которых заранее известна высота (для выравнивания по вертикали) или ширина (для горизонтального выравнивания).

Выравнивание при помощи padding

Иногда можно не центрировать элемент, а добавить ему границы свойством «padding».

Например, есть картинка 200 на 200 пикселей, и требуется центрировать ее в блоке 240 на 300. Можем задать высоту и ширину внешнему блоку = 200px, и добавить по 20 пикселей сверху и снизу, и по 50 слева и справа. 

.example-wrapper1{
background: #535E73;
width: 200px;
height: 200px;
padding: 20px 50px;
}

Выравнивание абсолютно позиционированных блоков

Если для блока задано «position: absolute», тогда его можно позиционировать относительно ближайшего родителя с «position: relative». Для этого нужно всем свойствам («top»,»right»,»bottom»,»left») внутреннего блока присвоить одинаковое значение, а также «margin: auto».

*Есть нюанс: Ширина (высота) внутреннего блока + значение left (right, bottom, top) не должны превышать размеры родительского блока. Надежнее свойствам left (right, bottom, top) присваивать 0 (ноль). 

.example-wrapper2{
position: relative;
height: 250px;
background: url(space.jpg);
}

.cat-king{
width: 200px;
height: 200px;    
position: absolute;
top: ;
left: ;
bottom: ;
right: ;
margin: auto;
background: url(king.png);
}

Больше

Fullscreen VideoМодальные коробкиШкалаИндикатор прокруткиСтроки хода выполненияПанель уменийПолзунки диапазонаПодсказкиPopupsСкладнойКалендарьHTML вставкаСписокПогрузчикиЗвездвРейтинг пользователейЭффект наложенияКонтактные фишкиКартыКарточка профиляОповещенияЗаметкиМеткиКругиКупонОтзывчивый текстФиксированный нижний колонтитулЛипкий элементОдинаковая высотаClearfixСнэк-барПрокрутка рисункаЛипкий заголовокТаблица ценПараллаксПропорцииПереключение типа/не нравитсяВключить скрытие/отображениеПереключение текстаПереключение классаДобавить классУдалить классАктивный классУвеличить HoverПереход при наведенииСтрелкиФормыОкно браузераНастраиваемая полоса прокруткиЦвет заполнителяВертикальная линияАнимация значковТаймер обратного отсчетаМашинкуСкоро страницаСообщения чатаРазделить экранОтзывыЦитаты слайд-шоуЗакрываемые элементы спискаТипичные точки останова устройстваПеретаскивание HTML-элементаКнопка спуска на входеJS медиа запросыJS анимацииПолучить элементы IFRAME

2-ой метод

Этот метод использует абсолютное позиционирование div-а, которому top устанавливается в 50%, а верхний отступ (margin-top) минус половине высоты контента. Это подразумевает, что объект должен иметь фиксированную высоту, которая определена в стилях CSS.

Поскольку высота фиксированная, вы можете установить overflow:auto; для div-а содержащего контент, таким образом, в случае если контент не будет влазить, то появятся скролл-бары.

Минусы

Когда не достаточно места, контент пропадает (например, div находится внутри body, а пользователь уменьшил окна, в этом случае скролл-бары не появятся.

Aligning the grid tracks on the block, or column, axis

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

В приведённом ниже примере у меня есть контейнер сетки размером 500 пикселей на 500 пикселей. Я определил 3 строки и столбцы, каждый из 100 пикселей с 10-пиксельным жёлобом. Это означает, что внутри контейнера сетки есть пространство как в блочном, так и в линейном направлениях.

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

Если я добавлю в мой контейнер со значением , все треки перейдут в конечную строку контейнера сетки в размерности блока:

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

Стоит отметить, что использование этих значений пространственного распределения может привести к увеличению элементов в вашей сетке. Если элемент охватывает более одной дорожки сетки, так как дополнительное пространство добавляется между дорожками, этот предмет должен стать большим, чтобы поглотить пространство. Мы всегда работаем в строгой сетке. Поэтому, если вы решите использовать эти значения, убедитесь, что содержимое ваших треков может справиться с дополнительным пространством или что вы использовали свойства выравнивания для элементов, чтобы заставить их перемещаться в начало, а не растягиваться.

В приведённом ниже изображении я поместил сетку с , со значением рядом с сеткой, когда значение имеет значение . Вы можете видеть, как элементы 1 и 2, которые охватывают два ряда дорожек, взяты на дополнительной высоте, поскольку они получают дополнительное пространство, добавленное к промежутку между этими двумя дорожками:

Инструменты центрирования в css

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

Итак, начнем с первого свойства центрирования текста — это text- align.

Хочу отметить, что в css3 можно установить еще 2 параметра: start – в зависимости от правил написания текста (справа налево или наоборот) устанавливает выравнивание слева или справа (аналогично работе left или right) и end – противоположен start (при написании текста слева направо действует как right, при написании справа налево – left).

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>text-align</title>
  <style>
   div {
    border: 5px double red;
    padding: 0 22px 0 22px;
   }
#l {
   text-align: right; }
#s {
   text-align: end; }
  </style>
 </head>
 <body>
  <div><p id="l">Предложение справа</p>
      <p id="s">Предложение c использованием end</p>
</div>
 </body>
</html>

Расскажу о небольшой фишке. При выборе значения justify последняя строка может некрасиво болтаться снизу. Для того чтобы ее, например, расположить по центру, можно воспользоваться свойством text-align-last.

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

Ключевое слово Предназначение
baseline Указывает выравнивание по линии предка, которая называется базовой. Если такой линии у объекта-предка не имеется, то выравнивание происходит по нижнему border-у.
middle Середина видоизменяемого объекта выравнивается по базовой линии, к которой добавляется пол высоты элемента-родителя.
bottom Нижняя часть выбранного контента подстраивается под основание объекта, находящегося ниже всех.
top Аналогично bottom, только с верхней частью объекта.
super Делает символ надстрочным.
sub Делает элемент подстрочным.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>vertical-align</title>
<style>
div{
  font-size: 4em;
  text-align:center;
  text-decoration: underline;
}
#A{vertical-align: top;}
#B{vertical-align: middle;}
#C{vertical-align: super;}
#D{vertical-align: sub;}
</style>
 </head>
 <body>  
  <div>
Ц<span id="A">В</span>Е<span id="B">Т</span><span id="C">О</span><span id="D">К</span>
  </div>
 </body>
</html>

DIV-элемент, центрированный при помощи Flexbox

Здесь мы располагаем CSS div по центру с помощью Flexbox. Он предназначен для того, чтобы облегчить процесс разработки дизайна пользовательских интерфейсов. Этот модуль поддерживается Chrome 38+, IE11, Microsoft Edge, Firefox 38+, Safari 9+, Opera 30+, iOS Safari 9+, а также Android Browser 40+.

CSS

.container
{
     display: flex;
     align-items: center;
     justify-content: center;
     height: 100vh;
}
.item
{
     background-color: #f3f2ef;
     border-radius: 3px;
     width: 200px;
     height: 100px; 
}

HTML

<div class="container"><div class="item"></div><div>

Значение свойства height может быть любым, но только больше размера центрированного div-элемента.

Перекрёстная ось

Свойства  и управляют выравниванием flex элементов по перекрёстной оси: вертикальной для  установленным в  и горизонтальной для  установленным в .

Рассмотрим выравнивание по перекрёстной оси на простейшем примере. Если установить  у контейнера, все дочерние элементы становятся flex элементами, выстроенными в ряд. Все они по вертикали примут размер самого высокого элемента, который станет определяющим вертикального размера. Если у flex контейнера задана высота, то все элементы растянутся до высоты контейнера, независимо от размера содержимого.

Все элементы становятся одной высоты, т.к. по умолчанию свойство  имеет значение .

Другие возможные значения свойства:

В примере ниже значение свойств  установлено в . Попробуйте другие значения для понимания их действия.

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

В следующем примере, у flex контейнера установлено , означающее, что все элементы будут выравнены по началу перекрёстной оси. У первого элемента с помощью  селектора установлено ; у следующего элемента с классом  установлено . Можно изменять значение  на контейнере или  на элементе для изучения их работы.8н

До сего момента мы изучали поведение при  установленном в , в языке, использующем написание сверху вниз. Это означает, что основная ось идёт горизонтально, а выравнивание по перекрёстной оси сдвигает элементы вверх или вниз.

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

Можно попробовать пример ниже, где установлено .

Универсальный способ выравнивания по центру

Предположим, нам надо выровнять кнопку по центру в CSS. Для этого необходимо создать див, в центре которого размещается кнопка, которую мы собираемся ставить посередине, а потом воспользоваться типом отображения flex. Код будет приблизительно таким (описание в самом коде).

<style>
.but {
    display: flex; /* Выставляем отображение родительского дива, как flex */
    align-items: center; /* Выравнивание по вертикали */
    justify-content: center; /* Выравнивание по горизонтали */
    height: 100%; /* Высота родительского дива. Необходимо, чтобы кнопка выровнялась посередине от его высоты. Если убрать, кнопка будет размещаться вверху, а не по центру (по оси Y) */
}

.but button {
    width: 400px;
    padding: 15px;
}
</style>

<div class="but">
    <button> Кнопка </button>
</div>

Таким способом можно выравнивать абсолютно любые элементы на веб-странице: формы, текст, картинки, меню, заголовки вертикально и горизонтально. Логика универсальна: создается родительский див, в который необходимый элемент загружается в качестве дочернего. В родительском диве прописываются свойства display: flex, align-items: center, justify-content: center, height: 100%. В дочернем прописывается ширина, отступ и другие свойства.
Единственный недостаток способа – он поддерживается только самыми новыми версиями браузеров. Часть свойств можно реализовать через вендорные префиксы (например, -webkit–) для увеличения совместимости со старыми версиями.

Alignment and auto margins

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

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

Вы можете видеть, как элемент выравнивается с помощью Firefox Grid Highlighter:

Centering vertically

CSS level 2 doesn’t have a property for centering things
vertically. There will probably be one in CSS level 3 (see ). But even in CSS2 you can center blocks vertically, by combining
a few properties. The trick is to specify that the outer block is
to be formatted as a table cell, because the contents of a table
cell can be centered vertically.

The example below centers a paragraph inside a block that has a
certain given height. A separate example shows a paragraph that is centered vertically in the browser
window, because it is inside a block that is absolutely positioned
and as tall as the window.

DIV.container {
    min-height: 10em;
    display: table-cell;
    vertical-align: middle }
...
<DIV class="container">
  <P>This small paragraph...
</DIV>

Центрирование блока или изображения

Иногда центрировать нужно не текст, а блок в целом. Или, по-другому говоря: мы хотим, чтобы правое и левое поля были одинаковыми. Для этого нужно установить поля на ‘auto’. Это обычно используется для блоков с фиксированной шириной, потому что если блок сам по себе гибкий, он просто займёт всю доступную ширину. Вот пример:

P.blocktext {
    margin-left: auto;
    margin-right: auto;
    width: 6em
}
...
<P class="blocktext">Этот довольно ...

Этот довольно узкий блок текста центрирован. Заметьте, что строки внутри блока не центрированы (они выровнены влево), в отличие от предыдущего примера.

Этот метод также можно использовать для центрирования изображения: поместите его в собственный блок и примените свойства полей. Например:

IMG.displayed {
    display: block;
    margin-left: auto;
    margin-right: auto }
...
<IMG class="displayed" src="..." alt="...">

How to Center Vertically

Centering elements vertically without modern methods like Flexbox can be a real chore. Here we’ll go over some of the older methods to center things vertically first, then show you how to do it with Flexbox.

How to Center a Div Vertically with CSS Absolute Positioning and Negative Margins

For a long time this was the go-to way to center things vertically. For this method you must know the height of the element you want to center.

First, set the property of the parent element to .

Then for the child element, set the property to and to :

But that really just vertically centers the top edge of the child element.

To truly center the child element, set the property to :

How to Center a Div Vertically with Transform and Translate

If you don’t know the height of the element you want to center (or even if you do), this method is a nifty trick.

This method is very similar to the negative margins method above. Set the property of the parent element to .

For the child element, set the property to and set to . Now instead of using a negative margin to truly center the child element, just use :

Note that is shorthand for and . You could also write to center the child element vertically.

How to Center a Div Vertically with Flexbox

Like centering things horizontally, Flexbox makes it super easy to center things vertically.

To center an element vertically, apply and to the parent element:

Выравнивание текста по вертикали HTML & CSS

Куда большую проблему, особенно для начинающих, доставляет необходимость вертикального выравнивания тексте. Необходимость выровнять текст по вертикали, в верстке встречается при:

  • создании различных дизайнов кнопок;
  • выравнивании разной величины блоков находящихся на одной линии;
  • вертикальное выравнивание текстов, с разным количеством строчке;
  • и еще в 100500 случаях.

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

Вертикальное центрирование текста с помощью тега «line-height»

Приведу пример создания кнопки стилями CSS.

Код HTML:

<div id="wrapper">
<div class="button">
Скачать
</div>
</div>

Код CSS:

#wrapper {
}
.button {
  background-color: #FFFFFF;
  border: 1px solid #CCCCCC;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
  transition: border 0.2s linear 0s, box-shadow 0.2s linear 0s;
  border-radius: 4px;
  color: #555555;
  width:120px;
  margin: 20px auto;
  font-size: 14px;
  text-align:center;
  height: 40px;
  line-height: 40px;
}
.button:hover, a.button:focus {
  border-color: rgba(82, 168, 236, 0.8);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(82, 168, 236, 0.6);
  outline: 0 none;
}

Результат: https://jsfiddle.net/k6g1phmf/14/.

Самые главные строчки, которые изучаем в данном примере, это и . Height, это высота кнопки, а тег , указывает на межстрочный интервал сверху и снизу. В результате, название кнопки располагается по центру.

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

Код HTML:

<div id="wrapper">
<div class="content">
Какой то длинный текст в этом блоке. Какой то длинный текст в этом блоке. Какой то длинный текст в этом блоке. Какой то длинный текст в этом блоке.
</div>
</div>

Код CSS:

#wrapper {
  background: #f09d06;
  height: 300px;
  margin: 20px;
  width: 300px;
  position: relative;
  resize: vertical;
  overflow: auto;  
}
.content {
  position: absolute;
  top: 50%;
  left: 20px;
  right: 20px;
  height: 100px;
  margin-top: -70px;
  background: #00f;
  color: white;
  padding: 20px;
}

Результат: https://jsfiddle.net/k6g1phmf/15/.

Вертикальное выравнивание по типу таблицы

Код HTML:

<div id="wrapper">
<div class="content">
Какой то длинный текст в этом блоке. Какой то длинный текст в этом блоке.
</div>
</div>

Код CSS:

#wrapper {
  display: table;
}
.content {
  background: #f09d06;
  color: white;
  width: 300px;
  display: table-cell;
  height: 200px;
  text-align: center;
  vertical-align: middle;
}

Результат: https://jsfiddle.net/k6g1phmf/18/.

Вертикальное выравнивание блока тегом «transform»

В том случае если не известен размер родительского блока, можно сделать такой трюк:

Код HTML:

<div id="wrapper">
<div class="content">
Какой то длинный текст в этом блоке. Какой то длинный текст в этом блоке. Какой то длинный текст в этом блоке. Какой то длинный текст в этом блоке.
</div>
</div>

Код CSS:

#wrapper {
  background: #f09d06;
  height: 300px;
  margin: 20px;
  width: 300px;
  position: relative;
}
.content {
  position: absolute;
  top: 50%;
  left: 20px;
  right: 20px;
  background: black;
  color: white;
  padding: 20px;
  transform: translateY(-50%);
  resize: vertical;
  overflow: auto;
}

Результат: https://jsfiddle.net/k6g1phmf/16/.

Выравнивание по вертикали с использованием «display:flex»

На сегодняшний день, самый лучший способ центрирования текста по вертикали в CSS, использование flex-верстки. Все что нужно сделать, это задать родительскому блоку тег и указать свойства и .

Код HTML:

<div id="wrapper">
<div class="content">
Какой то длинный текст в этом блоке. Какой то длинный текст в этом блоке.
</div>
</div>

Код CSS:

#wrapper {
  background: #f09d06;
  height: 300px;
  margin: 20px;
  width: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.content {
  background: black;
  color: white;
  width: 50%;
  padding: 20px;
}

Результат: https://jsfiddle.net/k6g1phmf/17/.

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

Интересненько!Нужно срочно изучить!

На заметку

  1. Боль в эпигастрии может быть симптомом многих заболеваний, и ее характер будет зависеть от типа патологии.
  2. Гастрит. Боли резкие, колющие, давящие, жгучие, возникают после приема пищи, нарушения в питании; снижение аппетита, тошнота, метеоризм, отрыжка, рвота, изжога.
  3. Язвенная болезнь. Боль острая, кинжальная, в области эпигастрия, изжога, рвота.
  4. Онкология. Постоянные боли распирающего характера, тяжесть, рвота, слабость, снижение аппетита, отрыжка, изжога, затруднение глотания.
  5. Заболевания поджелудочной железы (панкреатит). Боли тянущие, ноющие, опоясывающие в верхней половине живота, могут отдавать в поясницу, снижение аппетита, рвота, тошнота, диарея.
  6. Заболевания желчного пузыря (холецистит). Тянущая боль спереди, преимущественно справа, может отдавать в спину, лихорадка, рвота, тошнота, горечь во рту, отрыжка, вздутие живота, может быть пожелтение кожи и склер.
  7. Поддиафрагмальный абсцесс. Интенсивная боль в эпигастрии и под ребрами, отдает в лопатку и ключицу, одышка, слабость, кашель.
  8. Инфаркт миокарда (гастралгическая форма). Острая, колющая боль в эпигастрии, иррадиирует в плечо, челюсть и лопатки, снижение артериального давления, нарушение дыхания.
  9. В любом случае необходимо обратиться к врачу, так как это может быть серьезная патология.

Метод line-height

Данный метод работает, когда вы хотите центрировать вертикально одну строчку текста. Все что нужно сделать — это задать высоту строки больше, чем размер шрифта.

По умолчанию свободное пространство будет распределено равномерно сверху и снизу текста. И строка будет отцентрирована вертикально. Часто высоту строки делают равной высоте элемента.

CSS:

#child {
	line-height: 200px; 
}

Данный метод работает во всех браузерах, хотя использовать его можно только для одной строки.  Значение 200 px в примере выбрано произвольно. Можно использовать любые величины больше размера шрифта текста.

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

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

Adblock
detector