Как выровнять текст по горизонтали и вертикали в блоке div с помощью css | coderistu.ru

22 Янв/22

3460

Казалось бы, простая задача: выровнять текст по центру блока div. Присваиваем блоку свойство text-align:center и всего делов. Но как быть, если блок объемный и текст необходимо выровнять не только по горизонтали, а еще и вертикали? Конечно, можно задать padding в процентах для решения этой задачи. Но выравнивание в этом случае все — равно будет сбиваться. И тогда на помощь придет чудесные css свойства display:flex, display:table-cell и line-height.

Пример: у нас есть блок div высотой и шириной 200px, в котором необходимо отцентровать текст:

<div>текст</div>

<style>
.block {
width:200px;
height:200px;
border:1px solid;
text-align:center;
}
</style>

Если присвоить ему css свойство text-align:center, то текст выровняется только по горизонтали:

текст

Вариант 1: Для того, чтобы текст в блоке выровнялся как по горизонтали, так и по вертикали, блоку необходимо добавить css свойства display:flex, align-items: center и justify-content: center:

<div>текст</div>
<style>
. block {
width:200px;
height:200px;
border:1px solid;
text-align:center;
display:flex;
align-items: center;
justify-content: center
}
</style>

текст

Вариант 2: Используем свойства display:table-cell и vertical-align:middle:

<div>текст</div>
<style>
.block {
width:200px;
height:200px;
border:1px solid;

display:table-cell;
vertical-align:middle;
}
</style>

текст

Вариант 3: Выровнять текст по вертикали и горизонтали можно с помощью свойства line-height. Для этого зададим его равным высоте блока:

<div>текст</div>
<style>
.block {
width:200px;
height:200px;
border:1px solid;
line-height:200px
}
</style>

текст

На этом все. Надеюсь, что статья была вам полезной!

Продвижение сайтов в Новосибирске

Понравилась статья?

Оцените!

Средняя оценка / 5.

Количество оценок:

Оценок пока нет. Поставьте оценку первым!

Категории: css, html

Похожие записи :

28 Окт

Если у вас есть компания/фирма/организация и ее профиль в Яндексе с…

html, Разное Читать дальше 14 Авг

Наверняка каждый, кто начинал изучать html и php, сталкивался с тем, что при…

html, php Читать дальше 12 Авг

Чтобы задать размер шрифта на сайте с помощью css, необходимо у нужного…

css Читать дальше 14 Авг

Всем привет. На связи coderistu.ru. В этой статье мы рассмотрим, как сделать. ..

css, html Читать дальше 02 Авг

Всем привет. На связи coderistu.ru В одной из своих статей я писал, как сделать…

css, html Читать дальше

Текстовые блоки DIV и P, а так же их выравнивание Самоучитель HTML

Теги DIV и P предназначены в чистом(без стилей) хтмл, только для выравнивания текста по правому краю или по левому или по центру или по обеим сторонам.

Оба эти тега являются контейнерами, т.е. парными: <DIV>текст</DIV> <P>текст</P>.
Для того что-бы при помощи этих тегов можно было выравнивать текст нужно вставить в них атрибут ALIGN с нужным значением вот так:

  <html>
   <head>
    <title>Как выравнять текст</title>
   </head>
  <body>
  <DIV align="center"
 
>Выровнять текст по центру. </DIV>
  <DIV align="right">Выровнять текст по правому краю.</DIV>
  <DIV align="left">Выровнять текст по левому краю.</DIV>
  <DIV align="justify">Выровнять текст по  обоим краям.</DIV>
Тоже самое происходит с тегом P:
  <P align="center">Выровнять текст по центру.</P>
  <P align="right">Выровнять текст по правому краю.</P>
  <P align="left">Выровнять текст по левому краю.</P>
  <P align="justify">Выровнять текст по  обоим краям.</P>
  </body>
  </html>

У вас наверно возник вопрос, зачем в хтмл два одинаковых тега? Но на самом деле это совсем не так. Все теги которые помещаются в тег BODY, делятся на две категории строчные и блочные. Теги-блоки(блочные теги) в хтмл выполняют 2 роли:
1) выполняют свои функции, например тег P выравнивает текст;
2) выполняет автоматический перенос содержимого не помещенного в этот тег, т. е.

    <P align="right">содержимое тега</P> не содержимое.
Не содержимое перенесется на другую строку автоматически. Кстати, тег P можно использовать вообще без атрибута align, тогда он будет выполнять функции абзаца.
Ну а строковые(строчные) теги не выполняют авто переноса, в этом и вся разница, исходя из этого тег P является блочным, а тег DIV блочным, после которого при необходимости переноса нужно ставить тег BR. И еще теги h2-H6 так-же являются блочными.

Теперь еще раз вернемся к нашим тегам P и DIV и рассмотрим как писать нельзя. В чистом HTML(без использования CSS) у вас проблем не возникнет, т.к. нет необходимости вкладывать один тег Р в другой или тег Р в DIV, но на будущее нужно запомнить что тег P не может в себе содержать тег DIV или другой тег P, а вот тег DIV может содержать P или другие DIV.

    Правильный вариант:
    <DIV>
      <DIV></DIV>
      <P></P>
    </DIV>
    Не правильный вариант:
    <P>
      <DIV></DIV>
      <P></P>
    </P>

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

html — центрирование текста внутри div

Я пытаюсь центрировать текст (по горизонтали и вертикали), и у меня с этим возникают небольшие трудности.

Это то, что я пробовал, но центрировал его только по горизонтали, а не по вертикали.

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

 <дел>
            

                 
Текст будет в центре

css

 .playerDetailsPage {
    цвет фона: #edd4d4;
    ширина: 630 пикселей;
    рост: 390 пикселей;
    выравнивание текста: по центру;
    вертикальное выравнивание: посередине;
    высота строки: 390 пикселей;
}
  • HTML
  • CSS
3

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

Насколько я вижу, он работает идеально. Вот рабочий пример: http://jsfiddle.net/T7V58/1/

Ваш код правильный, в чем проблема? Просто удалите 9Тег 0029 p и вы там.

 <дел>
            
Текст будет в центре