ホームページ >ウェブフロントエンド >CSSチュートリアル >CSSでフォントを中央に配置するにはどうすればよいですか?
CSSでフォントを中央に配置するにはどうすればよいですか?
- 青灯夜游オリジナル
- 2019-05-20 09:36:1946970ブラウズ
CSSでフォントを中央揃えに設定するにはどうすればよいですか?以下の記事で紹介していますので、ご参考になれば幸いです。
1. CSS はフォントを水平方向の中央に配置するように設定します。
text-align を使用できます。 CSS の属性を使用して、フォントを水平方向に中央揃えに設定します。このプロパティは、テキストを中央揃えにする center 値を使用して、要素内のテキストの水平方向の配置を指定します。
text-align は、要素内のテキスト行をどのように配置するかに影響を与える基本的な属性です。 left、right、center の値を指定すると、要素内のテキストがそれぞれ左揃え、右揃え、中央揃えになります。テキストを中央揃えにしたい場合は、center を使用してください。
この属性は、text タグや img タグなどの一部のインライン オブジェクト (または同様の要素) の中央揃えを設定します。
この属性には次の特性があります:
1) text-align の中心はコンテナに適用されます。コンテナ内のテキストのみが対象となり、コンテナ内の表示はインラインまたは-ブロックコンテナ、内部コンテナの表示がブロックの場合、内部コンテナのコンテンツは中央に配置されません。
2)、text-align は下向きに推移的であり、引き続き子要素に渡されます。 div を設定すると、その子 div 内のコンテンツも中央に配置されます。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css 水平居中</title>
<style>
.box {
width: 400px;
height: 100px;
background: #ddd;
text-align:center;
}
</style>
</head>
<body>
<div class="box">css 水平居中了--文本文字</div>
</body>
</html>レンダリング:
2. CSS 設定フォントの垂直方向の中央揃え
1. line-height 属性により、テキストが垂直方向に中央揃えになります --- 単一行フォント
#
<!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. テキストを垂直方向の中央に配置する CSS3 フレックス レイアウト
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css 垂直居中</title>
<style>
.box{
width: 300px;
height: 300px;
background: #ddd;
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> レンダリング:
#3、vertical-align:middle display: table-cell テキストを垂直方向に中央揃えにします <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css 垂直居中</title>
<style>
.box {
width: 300px;
height: 300px;
background: #ddd;
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 サイトの他の関連記事を参照してください。