web-dev-qa-db-ja.com

行の高さを垂直方向に中央揃えするにはどうすればよいですか？

line-height CSSプロパティがテキストをこのボタンの中央に垂直に配置する理由を理解しようとしています：

.btn-order {
    width: 220px;
    height: 58px;
    font-size: 24px;
    padding: 0;
    text-align: center;
    vertical-align: middle;
    line-height: 58px;
    border: 1px solid black;
}
<div class="btn-order">Complete Order</div>
htmlcssvertical-alignment
16
user1069475

line-heightプロパティは、基本的に29px（29 + 29 = 58）テキスト行をテキストの上下に設定しています "完全な注文」。この下に別のテキスト行を追加すると、このテキストの下に58pxが表示されます。ここでは、テキストを中央に配置するためにのみ行の高さを設定しています。

この概念を理解するのに役立つスライドショーを次に示します... line-height

そして、これは私が話していることのあなたのコードを使用した例です： http://jsfiddle.net/YawDF/14/

line-heightを58pxに設定することで、ブラウザにテキスト行の上下に半分を残して、各行の間に「58px」のギャップを作り、最初の行の上に「29px」のギャップのみを作るように指示しています。

サイド注：表示しているコードでは、vertical-align: middleを使用しても意味がありません。まとめて取り出せます。

13
Michael Rader

生成するテキストは独自の行ボックス内にあります であり、vertical-alignはそのボックス内の配置に使用されます。ただし、そのボックスは、テキストをラップしたdivとは関係ありません。 divの高さを58pxに設定しますが、それは行テキストボックスの高さに影響しません。そのため、divの高さに合わせてline-heightが必要です。

1
Rob

段落が分割に挿入されるときはいつでも、最初の行とdivの上枠の間の距離は、行の高さの半分です。つまり、デフォルトの行の高さが1pxの場合、最初の行と上枠の間の距離divは0.5pxです。

height:58pxの分割がある場合、線とdivの上部境界線の間の距離は29pxであり、線と下部divの境界線の間の距離は、=（合計div高さ-距離b/w線と上部の境界線）は58px-29px = 29pxです。これにより、線は中央で垂直に配置されます。

また、line-heightを使用してテキストを中央揃えにする場合は、vertical align:middle（1行以下のテキストの場合）を使用する必要はありません。

0
aditya

line-heightは、段落の見栄えを良くするテキストの高さを定義するので、行の高さを大きくすると高さが増加し、テキストの垂直方向の配置の効果をより明確に見ることができます。

これは私たちの子供たちが英語を学ぶために使用するノートであると思います-保育園のクラスで書く

0
Bipin Chandra Tripathi

仕様によるものです。 CSSパーサー（ブラウザなど）がテキストの高さがわからない場合、テキストを垂直方向に正しく配置できません。

line-heightプロパティのデフォルト値があることに注意してください。

0
Raptor