詳細 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を使っても縦に中央寄せにならない解決策は、この記事で全て解決しています。
関連
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン