ZorNet.Ru — сайт для вебмастера » HTML и CSS » Выравнивание текста по вертикали и центру CSS

Выравнивание текста по вертикали и центру CSS

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

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

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

Первый метод с line-height

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

HTML

Код

<div class="constutesim_first">
<p>Это первый метод, что показан на демонстраций</p>
</div>

CSS

Код

.constutesim_first {
  border: 2px solid #bf1515;
  height: 175px;
}
.constutesim_first > p{
  line-height:175px;
  margin:0;
  text-align:center;
  padding: 0;
  font-size: 17px;
  color: #3152a0;
  font-family: Tahoma;
  font-weight: bold;
}

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

Демонстрация

Аналогичным методом, есть возможность реализовать, как выставить изображение, что будет по центру и безусловно по вертикали. Здесь остается только прописать одно свойство vertical-align: middle; которое отвечает за вывод картинки.

HTML

Код

<div class="second-variation">
<div><img src="http://zornet.ru/Aben/JdPP3A0SR5eBIkFnVcMsEg.png">Вторая вариация, которая идет с изображением</div>
</div>

CSS

Код

.second-variation{
  border: 2px solid red;
  line-height:158px;
}

.second-variation div{
  text-align:center;
}
.second-variation img {
  vertical-align: middle;
  border: 0px solid #3a3838;
}

Реализуем снимки изображений по центру и вертикали.

Демонстрация

Выравнивание со свойством position

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

Как правильно выравнять по центру элемент на странице

HTML

Код

CSS

Код

.competaird-option {
  border: 2px solid #d40e0e;
  height: 162px;
  position: relative;
}
.competaird-option div {
  position: absolute;
  top: 50%;
  left: 50%;
  height: 28%;
  width: 49%;
  margin: -2% 0 0 -25%;
  border: 2px solid #4a4848;
}

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

Демонстрация

Выравнивание со свойством table

В этом методе задействуем проверенную и старую методу, где переделаем элементы в таблицу в которой находятся ячейки. Что по тегу, под названием table, то здесь он не будет задействован, здесь будем задавать совершенно другие свойство CSS, это display: table;, display: table-cell;. Если говорить про самые старые версий IE, то данные здесь просто выводить не будет. Надеюсь вы свой браузер обновили, так как он становится не актуален и почти все не корректно выводит.

Позиционирование блочных элементов в CSS

HTML

Код

<div class="cherevert-variation">
<div>Это еще одна вариация, выставить по центру</div>
</div>

CSS

Код

.cherevert-variation {
  border: 2px solid #c30b0b;
  height: 173px;
  display: table;
  width: 100%;
  font-size: 17px;
  font-weight: bold;
  color: #3945a0;
}

.cherevert-variation div{
  display: table-cell;
  vertical-align: middle;
  text-align:center;
}

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

Демонстрация

Выравнивание со свойством flex

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

HTML

Код

<div class="variant-horizontal">
<div>Выравнивание со свойством flex</div>
</div>

CSS

Код

.variant-horizontal {
  border: 2px solid #d20c0c;
  height: 147px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: bold;
  color: #49518c;
}

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

Демонстрация

Выравнивание со свойством transform

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

HTML

Код

<div class="vertical-medilpasudsa">
<div>Выравнивание со свойством transform</div>
</div>

CSS

Код

.vertical-medilpasudsa {
  border: 2px solid #e00a0a;
  height: 158px;
  font-size: 19px;
  font-weight: bold;
  color: #353c71;
}
.vertical-medilpasudsa > div{
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  text-align:center;
}

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

Демонстрация

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

Если вам нужно центрировать текст внутри элемента, такого как div, header или paragraph, вы можете использовать свойство text-align CSS.

Text-align имеет несколько допустимых свойств:

Center: Текстура центрирована;
left: Будет выравниваться с левой стороны контейнера;
right: Выровнен с правой стороны контейнера
justify: Вынужден ровняться, как с левой, так и с правого края контейнера, за исключением крайних строк;
justify-all: Заставляет крайнее строку оправдывать знаки;
start: То же самое, что по левую, только если направление идет с лева на правую сторону. Но правильно будет, если изначально задать направление текстового направление, что произойдет справа налево;
End: Противоположность начала;
match-parent: Аналогично наследованию, кроме начала и конца, вычисляется относительно родительского элемента;

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

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

31 Июля 2018 Просмотров: 3026 Комментариев: (0)

Поделиться в социальных сетях

Материал разместил

Kosten

Комментарии: 0