HTMLのフォントがline-heightを指定しても垂直方向に中央揃えできない問題の解決方法を詳しく説明します

による写真に示されている効果を例に挙げてみましょう。明らかに、「次へ」というテキストを水平方向だけでなく垂直方向にも中央に配置する必要があります。このとき、次のようにコードを記述します。

<!DOCTYPE html>
<html>
	<ヘッド>
		<メタ文字セット="UTF-8">
		<タイトル></タイトル>
		<スタイル>
			#次へボタン{
		            高さ: 54px;
			    テキスト配置: 中央;
			    色: #fff;
			    背景: #e2231a;
			    行の高さ: 54px;
			    font:16px "Microsoft YaHei","Hiragino Sans GB";
			    カーソル: ポインタ;
			    マージン: 0 自動;
			    幅:400ピクセル;
			}
			
		</スタイル>
	</head>
	<本文>
		<div id="next-button">次へ</div>
	</本文>
</html>

ここでは、幅、高さ、背景色、フォント、水平および垂直の中央揃えを設定しますが、次のような効果が得られます。

テキストを垂直方向に中央揃えにしようとしても効果がありません。コードを変更しました

<!DOCTYPE html>
<html>
	<ヘッド>
		<メタ文字セット="UTF-8">
		<タイトル></タイトル>
		<スタイル>
			#次へボタン{
			    幅:400ピクセル;
			    高さ: 54px;
			    テキスト配置: 中央;
			    色: #fff;
			    背景: #e2231a;
			    font:16px/54px "Microsoft YaHei","Hiragino Sans GB";
			    カーソル: ポインタ;
			    マージン: 0 自動;
			}
		</スタイル>
	</head>
	<本文>
		<div id="next-button">次へ</div>
	</本文>
</html>

垂直方向に中央揃えすることができます。その理由は、line-height と font がスタイル宣言リストに含まれている場合、line-height は無効であり、font と一緒に使用する必要があるためです。スタイル宣言にフォントが含まれていない限り、line-height を使用してテキストの垂直方向の中央を設定できます。

これで、line-height を使用しても HTML のフォントが垂直方向に中央揃えできない問題の解決方法についての記事は終了です。line-height が垂直方向に中央揃えできないことの詳細については、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

<<: CSS の新機能には、コントロールページの再描画と再配置の問題が含まれています

>>: Tableとdivの簡単な紹介と使い方