ホームページ >ウェブフロントエンド >htmlチュートリアル >line-height_html/css_WEB-ITnose を設定するだけでテキストの垂直方向の中央揃えが実現できるのはなぜですか
line-height_html/css_WEB-ITnose を設定するだけでテキストの垂直方向の中央揃えが実現できるのはなぜですか
- WBOYオリジナル
- 2016-06-24 11:27:581440ブラウズ
line-height を設定するだけでテキストの垂直方向の中央揃えが実現できるのはなぜですか:
実際のアプリケーションでは、要素内で 1 行のテキストを垂直方向の中央揃えにしたい場合は、要素の高さと行の高さを設定できます。要素を同じ値に設定します。
コード例は次のとおりです。
<!DOCTYPE html><html><head><meta charset=" utf-8"><meta name="author" content="http://www.softwhy.com/" /><title>蚂蚁部落</title><style type="text/css">div{ width:200px; height:50px; background:#CCC; line-height:50px; text-align:center;}</style></head><body><div>蚂蚁部落softwhy.com</div></body></html> 上記のコードは、div 内の 1 行のテキストを div 内で垂直方向に中央揃えにすることができます。使用方法は非常に簡単です。 line-height 属性値はわずか 50 ピクセルです。実際のアプリケーションでは、height 属性を使用する必要はありません。この機能は、次のようにコードを変更するだけで実現できます。属性を使用すると、高さを生成することもでき、テキストを垂直方向に中央揃えにすることもできます。
これは少し奇妙に見えますか? 実際、これは line-height 属性の影響によるものです。デフォルトの状態では、他の要素の干渉がない場合、テキストはコンテンツエリアボックスで囲まれます。このときのコンテンツエリアボックスのサイズは、フォントのサイズによって決まります。 line-height 属性を設定する場合は、次の処理が行われます。
1. 半行間隔を取得します: Half-line spacing = (line-height-content area box (つまり、フォントのサイズ))/2。2. 次に、コンテンツエリアボックスの上辺と下辺にそれぞれ半行間隔を配置し、行ボックスの高さのサイズを取得します。したがって、行の高さを設定するだけで高さを生成し、テキストを中央に配置できます。
特記事項: 簡単に説明するため、ここではインライン ボックスの概念を意図的に省略しています。詳細については、line-height 属性の詳細な紹介に関する章を参照してください。
元のアドレスは次のとおりです: http://www.softwhy.com/forum.php?mod=viewthread&tid=15915
詳細については、以下を参照してください: http://www.softwhy.com/divcss/