css - テキストを縦に揃えるには？

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

テキストが1行しかない場合は、line-heightをと同じ値に設定できますheight。これはどの要素でも機能します。

Answer 2

ハッキーですが、おそらく最も簡単な方法：

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

リストアイテムの箇条書きの代わりに背景画像を追加する必要があります。

Answer 3

常に1本の線を中央に配置することがわかっている場合は、一致heightさせることができます。line-height

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

Answer 4

vertical-alignプロパティを試してください。

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

Answer 5

line-height を入れて、テキストとボーダーの間に隙間を作ると良いです。しかし、これはベスト プラクティスではありません。行の高さはマージンやパディングを作成するためのものではないためです。2 つのテキスト行の間にギャップ (段落の 2 つの行の間のギャップ) を作成するためのものです。

したがって、タスクを完了させるには、マージンまたはパディングを配置する必要があります。より良いオプションは、マージンを置くことです（ただし、これは配置ではありません。上部にマージンを置くだけです）。また、テキストを「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. */

}