1. ホーム
  2. Web制作
  3. HTML/Xhtml

詳細 HTMLフォントはline-heightを使用して、まだ垂直方向の中央に配置することができません解決策

2022-01-07 15:58:05

の画像では、当然ながら、quot;next" のテキストを水平方向だけでなく垂直方向にもセンタリングしたいので、以下のようなコードを記述します。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			#next-button{
		            height: 54px;
			    text-align: center;
			    color: #fff;
			    background: #e2231a;
			    line-height: 54px;
			    font:16px "Microsoft YaHei","Hiragino Sans GB";
			    cursor: pointer;
			    margin: 0 auto;
			    width:400px;
			}
			
		</style>
	</head>
	<body>
		<div id="next-button">next</div>
	</body>
</html>

その中で、幅、高さ、背景色、フォント、水平・垂直方向のセンタリングを設定しているにもかかわらず、次のような効果が得られています。

設定したテキストの垂直方向の中央寄せがうまくいきません。代わりに、コードを次のように変更します。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			#next-button{
			    width:400px;
			    height: 54px;
			    text-align: center;
			    color: #fff;
			    background: #e2231a;
			    font:16px/54px "Microsoft YaHei","Hiragino Sans GB";
			    cursor: pointer;
			    margin: 0 auto;
			}
		</style>
	</head>
	<body>
		<div id="next-button">next</div>
	</body>
</html>

は垂直方向にセンタリングされます。これは、スタイル宣言のリストに line-height とフォントがある場合、line-height は無効であり、フォントと一緒に使用しなければならないからである。スタイル宣言にフォントがない限り、line-height を使ってテキストを垂直方向で中央寄せにすることができます。

HTMLでline-heightを使っても縦に中央寄せにならない解決策は、この記事で全て解決しています。