ホームページ >ウェブフロントエンド >フロントエンドQ&A >CSSテキストを垂直方向に中央揃えにする方法
CSSテキストを垂直方向に中央揃えにする方法
- 藏色散人オリジナル
- 2021-04-29 09:15:5048023ブラウズ
CSS でテキストを垂直方向に中央揃えにする方法: 1. line-height 属性を使用してテキストを垂直方向に中央揃えにする; 2. 外部ブロックを表のセルに書式設定する; 3. CSS3 flex レイアウトによってテキストを垂直方向に中央揃えにする。
この記事の動作環境: Windows7 システム、HTML5&&CSS3 バージョン、Dell G3 コンピューター。
方法:
方法 1: line-height プロパティを使用してテキストを垂直方向に中央揃えにします
line-height プロパティは行間の距離を設定します(行の高さ); この属性には負の値は許可されません。
line-height プロパティは、行ボックスのレイアウトに影響します。ブロックレベルの要素に適用すると、その要素内のベースライン間の最大距離ではなく、最小距離が定義されます。
行の高さとフォント サイズの間の計算された差 (CSS では「行間隔」と呼ばれます) は 2 つの半分に分割され、テキスト コンテンツの行の上部と下部に追加されます。このコンテンツを含めることができる最小のボックスはライン ボックスです。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css 垂直居中</title>
<style>
.box{
width: 300px;
height: 300px;
background: #ddd;
line-height:300px;
}
</style>
</head>
<body>
<div class="box">css 垂直居中了--文本文字</div>
</body>
</html>レンダリング:
方法 2: 外側のブロックを表のセルに書式設定する
表のセルの内容を垂直中央、書式設定することができます。外側のブロックを表のセルとして使用し、テキストを垂直方向の中央に配置します。
例: 特定の高さを指定してブロック内に段落を配置する
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css 垂直居中</title>
<style>
.box{
width: 400px;
height: 200px;
background: #ddd;
display: table-cell;
vertical-align: middle;
}
</style>
</head>
<body>
<div class="box">css 垂直居中了--文本文字</div>
</body>
</html>レンダリング:
方法 3: CSS3 を使用するレイアウトによりテキストが垂直方向の中央に配置されます
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css 垂直居中</title>
<style>
.box{
width: 300px;
height: 200px;
background: #ddd;
/*设置为伸缩容器*/
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
/*垂直居中*/
-webkit-box-align: center;/*旧版本*/
-moz-box-align: center;/*旧版本*/
-ms-flex-align: center;/*混合版本*/
-webkit-align-items: center;/*新版本*/
align-items: center;/*新版本*/
}
</style>
</head>
<body>
<div class="box">css 垂直居中--文本文字（弹性布局）</div>
</body>
</html>レンダリング:
HTML/CSS の詳細については、CSS ビデオ チュートリアルColumn をご覧ください。 ！
以上がCSSテキストを垂直方向に中央揃えにする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。