Как вертикально выровнять текст в абзаце?

Я хотел бы знать, чтобы текст в элементе p был вертикально центрирован.

Вот мои стили:

p.event_desc {
 font: bold 12px "Helvetica Neue", Helvetica, Arial, sans-serif;
 line-height: 14px;
 height: 35px;
 margin: 0px;
}

и HTML:

<p class="event_desc">Lorem ipsum.</p>

Ответ 1

Попробуйте эти стили:

p.event_desc {
  font: bold 12px "Helvetica Neue", Helvetica, Arial, sans-serif;
  line-height: 14px;
  height:75px;
  margin: 0px;
  display: table-cell;
  vertical-align: middle;
  padding: 10px;
  border: 1px solid #f00;
}

<p class="event_desc">lorem ipsum</p>

Ответ 2

Вы можете использовать line-height для этого. Просто установите его на точную высоту вашего тега p.

p.event_desc {
  line-height:35px;
}

Ответ 3

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

.parent-div{
  width: 100px;
  height: 100px;
  background-color: blue;
}

.text-div{
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

p.event_desc{
  font: bold 12px "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: white;
  text-align: center;
}

<div class="parent-div">
  <div class="text-div">
   <p class="event_desc">
    MY TEXT
   </p>
  </div>
</div>

Ответ 4

вы можете использовать

    line-height:35px;

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

Вместо этого используйте Div с высотой и p внутри него с правильной высотой строки:

    <div style="height:35px;"><p style="line-height:35px;">text</p></div>

Ответ 5

Попробуйте следующее:

display: table-cell;
vertical-align: middle;
padding: 10px;

Ответ 6

Вы пытались играть с разницей? У меня была та же проблема, почему я здесь :)

Вот что помогло мне:

element {
    margin: auto;

}

Если вам нужно, чтобы он был выровнен влево или вправо и в центре, вы можете сделать следующее:

element {
    margin-top: auto;
    margin-bottom: auto; /*You can use shorthand*/

}

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

Надеюсь, это полезно :)

Ответ 7

Если вы используете Bootstrap, попробуйте назначить поле margin-bottom 0 для абзаца, а после присвоите свойству align-items-center контейнер, например, так:

<div class="row align-items-center">
     <p class="col-sm-1 mb-0">
          ....
     </p>
</div>

Bootstrap по умолчанию назначает нижнюю границу вычисления, поэтому mb-0 отключил это.

Я надеюсь, что это помогает