2

テキストを垂直方向に中央揃えにする典型的な解決策は次のとおりです。

p {
    width: 10em;
    height: 2.4em;
    display: table-cell;
    vertical-align: middle;
}

効果は次のとおりです。

 _________________
|                 |
|                 |
| Line 1 of text  |
|                 |
|_________________|

 _________________
|                 |
| Line 1 of text  |
| Line 2 of text  |
| Line 3 of text  |
|_________________|

長すぎてボックスに収まらないテキストを非表示にしようとすると、この解決策はうまくいきませんでした。

p {
    ...
    ...
    overflow: hidden;
}

表のセルでは、オーバーフロー ルールが何らかの理由で無視されます。

 _________________
| Line 1 of text  |
| Line 2 of text  |
| Line 3 of text  |
| Line 4 of text  |
| Line 5 of text  |
 -----------------
  Line 6 of text
  Line 7 of text

マージンを含む他の多くのルールも機能しなくなります。他の多くの重要な CSS ルールを破ることなく、任意の行数のテキストを垂直方向に中央揃えする方法は他にありますか?

4

1 に答える 1