Html центрирование текста: Как выровнять текст по центру?

Leave a Comment / Html / By /

html — Не работает центрирование текста

Вопрос задан

Изменён 1 год 3 месяца назад

Просмотрен 78 раз

Пытался выровнять текст по центру блока при помощи vertical-align и text-align,

но текст не хочет выравниваться по центру. Каким образом это исправить?

#block{
background: gold;
height: 100px;
margin-bottom:10px;
}
#text{
font-size: 25px;
vertical-align: middle;
text-align: center;
}
<div id ="block">                  
<div id ="text">
Заяц и волк =)
</div>
</div>
  • html
  • css

vertical-align — не предназначен для выравнивание текста по центру по оси Y.

Это свойство выравнивает элемент относительно родителя и окружающего его текста.

..

#block {
  background: gold;
  height: 100px;
  text-align: center;
}
span.s {
  vertical-align: -50px;
  font-size: 35px;
}
span.p {
  vertical-align: middle;
  font-size: 35px;
}
<div>
  <span>
           
        </span>
  <span>
           
        </span>
</div>

Вариант два

#block {
  background: gold;
  height: 100px;
  text-align: center;
}
span.s {
  vertical-align: 20px;
  font-size: 35px;
}
span.p {
  vertical-align: -20px;
  font-size: 35px;
}
<div>
  <span>
           
        </span>
  <span>
           
        </span>
</div>

что бы было понятнее

#block {
  background: gold;
  height: 100px;
  text-align: center;
}
span.s {
  vertical-align: baseline;
  font-size: 35px;
}
<div>
  Lorem ipsum dolor sit amet
  <span>Заяц и волк =)
   </span> incidunt nulla dignissimos
</div>

еще вариант

#block {
  background: gold;
  height: 100px;
  text-align: center;
}
span. s {
  vertical-align: middle;
  font-size: 35px;
}
<div>
  Lorem ipsum dolor sit amet
  <span>Заяц и волк =)
   </span> incidunt nulla dignissimos
</div>

1

И не должно работать. UPD заставил работать с vertical-align.

#block{
  display: table-cell;
  vertical-align: middle;
  height: 100px;
  background-color: gold;
}
#text {
  background-color: tomato;
}
<div id ="block">                  
<div id ="text">
Заяц и волк =)
</div>
</div>

7

Пример на flex

#block{
background: gold;
height: 100px;
margin-bottom:10px;
display: flex;
justify-content: space-around;
}
#text{
font-size: 25px;
align-self: center
}
<div id ="block">                  
<div id ="text">
Заяц и волк =)
</div>
</div>

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Лучшие практики выравнивания текста в интерфейсе

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

Любой интерфейс на 90% текстовый. Вот почему, когда вы видите правильно выровненную типографику, у вас создается впечатление, что вы используете более продуманный интерфейс. А когда что-то не на своем месте, это сразу же бросается в глаза и вредит нашему восприятию.

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

Совет 1. Избегайте выравнивания по центру для длинного текста

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

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

Совет 2.

Всегда выравнивайте длинный текст по левому краю

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

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

Совет 3. Используйте выравнивание по центру только для заголовков или небольших блоков текста.

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

Если вам нужно центрировать более одного блока текста, но один из них немного длиннее, то лучшее решение — изменить/переписать контент, чтобы сделать его короче:

Совет 4.

Используйте выравнивание выступа для соединения с элементами пользовательского интерфейса.

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

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

Совет 5. Выровняйте данные и числа по правому краю

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

Совет 6. Балансируйте пустые пространства для текста с выравниванием по ширине

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

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

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

Спасибо за чтение!

Оригинал

Если вы нашли опечатку — выделите ее и нажмите Ctrl + Enter! Для связи с нами вы можете использовать [email protected].

Как центрировать текст в HTML (для начинающих)

Узнайте о правильном и неправильном способе центрирования текста в HTML-документе с помощью CSS и без него.

Published By Dim NikovCategorized as HTML

Вы изучаете HTML и CSS и хотите знать, как центрировать текст в элементе DOM (независимо от того, является ли этот элемент DOM заголовком, абзацем или чем-то еще).

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

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

Старый способ центрирования текста в HTML-документе заключается в заключении его в тег

, но этот тег больше не поддерживается в HTML5. По этой причине лучший способ сделать это — присвоить ему CSS-свойство text-align: center .

С помощью CSS-свойства Text-Align

Лучший способ центрировать текст в HTML-элементе — задать ему свойство CSS text-align со значением «center».

Вы можете сделать это, встроив код CSS в атрибут style="" HTML-элемента, текст которого вы хотите центрировать:

 
Текст будет здесь.

Или настроив Рассматриваемый элемент HTML с правилом CSS в таблице стилей, независимо от того, появляется ли он в документе в пределах тег