ホームページ >ウェブフロントエンド >CSSチュートリアル >CSSでテキストを中央揃えにする方法
CSSでテキストを中央揃えにする方法
- 青灯夜游オリジナル
- 2021-04-20 17:18:4726646ブラウズ
テキストの中央揃えの方法: 1. "text-align:center;" ステートメントを使用して水平方向の中央揃えを設定します。 2. CSS3 のフレックス レイアウトを使用して垂直方向の中央揃えを設定します。 3. "vertical-align:middle;" ステートメントを使用します。 display: table-cell;" ステートメントは垂直方向のセンタリングを設定します。
このチュートリアルの動作環境: Windows 7 システム、CSS3&HTML5 バージョン、Dell G3 コンピューター。
css はテキストを水平方向の中央に設定します
CSS では、text-align 属性を使用してフォントを水平方向に設定できます中心にあります。このプロパティは、テキストを中央揃えにする center 値を使用して、要素内のテキストの水平方向の配置を指定します。
text-align 構文:
text-align : left | right | center | justify
text-align パラメータ値と説明:
left : 左Alignment
right : 右揃え
center : 中央
justify : 両端揃え(推奨されません。通常、ほとんどのブラウザでは使用されません)
text-align で一般的に使用されるパラメータ値は、left、right、centerです。
属性は次のとおりです。機能:
1). text-align の中心はコンテナに適用され、コンテナ内のテキストと表示がインラインまたはインラインブロックのコンテナのみが対象となります。コンテナ内部が inline または inline-block、block の場合、コンテナ内部のコンテンツは中央揃えになりません。
2)、text-align は下向きに推移的であり、引き続き子要素に渡されます。 div を設定すると、その子 div 内のコンテンツも中央に配置されます。
例:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css 水平居中</title>
<style>
.box {
width: 400px;
height: 100px;
background: palegoldenrod;
text-align:center;
}
</style>
</head>
<body>
<div class="box">css文本文字--水平居中</div>
</body>
</html>レンダリング:
(学習ビデオ共有: cssビデオチュートリアル)
css でテキストを垂直方向の中央に設定します
1. CSS3 フレックス レイアウトでテキストを垂直方向の中央に配置します
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css 垂直居中</title>
<style>
.box{
width: 300px;
height: 300px;
background: palegoldenrod;
line-height:300px;
/*设置为伸缩容器*/
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>レンダリング:
##2.vertical-align:middle display:table-cell テキストを垂直方向に中央揃えにします
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css 垂直居中</title>
<style>
.box {
width: 300px;
height: 300px;
background: palegoldenrod;
vertical-align:middle;
display:table-cell;
}
</style>
</head>
<body>
<div class="box">css 文本文字--水平居中</div>
</body>
</html>レンダリング:
説明:vertical-align:middle display:table-cell は、単一行テキストと複数行テキストを有効にできます。すべて中心にあります。ただし、table-cell はインライン型であるため、元のブロックレベルの要素が div ごとに同じ行に移動されます。行を 2 つの行に分割する必要がある場合は、位置を制御するために外側に追加のコンテナーを追加する必要があります。
プログラミング関連の知識について詳しくは、プログラミング ビデオをご覧ください。 ！
以上がCSSでテキストを中央揃えにする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。