ホームページ > 記事 > ウェブフロントエンド > CSSでテキストを中央揃えにする方法
CSSでテキストを中央揃えにする方法
- 醉折花枝作酒筹オリジナル
- 2021-04-15 19:17:0155609ブラウズ
方法: 1. text-align 属性を使用して、テキストが水平方向の中央に配置されるように設定します (構文 "text-align:center")。2. line-height 属性を使用して、テキストが垂直方向に配置されるように設定します。中央揃え、構文 "line-height: value"; 3. CSS3 のフレックス レイアウトを使用して、テキストを垂直方向に中央揃えにします。
このチュートリアルの動作環境: Windows 7 システム、CSS3&&HTML5 バージョン、Dell G3 コンピューター。
1. text-align 属性を使用して、テキストを水平方向の中央に配置します。
text-align 属性は、要素内のテキストの水平方向の配置を指定します。中心値を使用してテキストを配置します。
text-align は、要素内のテキスト行をどのように配置するかに影響を与える基本的な属性です。 left、right、center の値を指定すると、要素内のテキストがそれぞれ左揃え、右揃え、中央揃えになります。テキストを中央揃えにしたい場合は、center を使用してください。
この属性は、text タグや img タグなどの一部のインライン オブジェクト (または同様の要素) の中央揃えを設定します。
この属性には次の特性があります:
1) text-align の中心はコンテナに適用されます。コンテナ内のテキストのみが対象となり、コンテナ内の表示はインラインまたは-ブロックコンテナ、内部コンテナの表示がブロックの場合、内部コンテナのコンテンツは中央に配置されません。
2)、text-align は下向きに推移的であり、引き続き子要素に渡されます。 div を設定すると、その子 div 内のコンテンツも中央に配置されます。
nbsp;html>
<meta>
<title>css 水平居中</title>
<style>
.box {
width: 400px;
height: 100px;
background: pink;
text-align:center;
}
</style>
<div>css 水平居中了--文本文字</div>
レンダリング:
#2. line-height 属性を使用してテキストを垂直方向に中央揃えにします
line-height プロパティは、行間の距離 (行の高さ) を設定します。負の値は許可されません。 このプロパティは、ライン ボックスのレイアウトに影響します。ブロックレベルの要素に適用すると、その要素内のベースライン間の最大距離ではなく、最小距離が定義されます。nbsp;html>
<meta>
<title>css 垂直居中</title>
<style>
.box {
width: 300px;
height: 300px;
background: paleturquoise;
line-height:300px;
}
</style>
<div>css 垂直居中了--文本文字</div>
レンダリング: 
3. CSS3 フレックス レイアウトにより、テキストが垂直方向の中央に配置されます
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css 垂直居中</title>
<style>
.box{
width: 300px;
height: 200px;
background: #ccc;
/*设置为伸缩容器*/
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>効果:
以上がCSSでテキストを中央揃えにする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。