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

Question

Какой самый простой способ выровнять текст по вертикали здесь с помощью CSS?

<ul>
    <li>Hello</li>
    <li>Bye Bye</li>
    <li>Ciao</li>
</ul>

li {
    border: 1px solid black;
    width: 100px;
    height: 50px;
    margin-bottom: 20px;
    text-align: center;
}

Answer 1

Если у вас всего одна строка текста, вы можете установить для line-height то же значение, что и для height.Это работает для любого элемента.

Answer 2

Если вы знаете, что всегда собираетесь центрировать одну строку , вы можете сопоставить height и line-height

li {
    ...
    height: 50px;
    line-height: 50px;
    ...
}

Answer 3

Хаки, но, возможно, самый простой способ:

li {
    display: table-cell; 
    vertical-align: center;
}

Вам потребуется добавить фоновое изображение вместо маркера элемента списка.

Answer 4

Хорошо бы установить высоту строки и пропасть между текстом и границей. но это не лучшая практика. потому что высота строки не для создания полей или отступов. Это для создания промежутка между двумя строками текста (промежуток между двумя строками абзаца).

Так что, чтобы ваша задача была выполнена, вы должны поставить поле или отступы. Лучшим вариантом является наложение поля (но это не выравнивание. Просто наложение поля сверху). А также поместите ваш текст в тег «p» или «span» (независимо от тега, который можно использовать для переноса текста).

HTML-код,

<ul>
    <li><span>Hello</span></li>
    <li><span>Bye Bye</span></li>
    <li><span>Ciao</span></li>
</ul>

код CSS,

ul li span {
    margin-top: 5px;
}

Если выравнивание по вертикали необходимо, вот код.

  ul li {
     position: relative;
  }

  ul li span {
      position: absolute;
      top: 50%;
      font-size: 12px; /* change this as your need. */
      line-height: 12px; /* keep this value same as font-size. */
      margin-top: -6px; /* half value from the font-size. */

}

Answer 5

Попробуйте свойство вертикального выравнивания:

http://www.w3schools.com/css/pr_pos_vertical-align.asp