CSSでテキストを中央揃えにする方法-CSSチュートリアル-php.cn

CSSでテキストを中央揃えにする方法

青灯夜游

リリース： 2023-01-05 16:10:09

オリジナル

26603 人が閲覧しました

テキストの中央揃えの方法: 1. "text-align:center;" ステートメントを使用して水平方向の中央揃えを設定します。 2. CSS3 のフレックスレイアウトを使用して垂直方向の中央揃えを設定します。 3. "vertical-align:middle;" ステートメントを使用します。 display: table-cell;" ステートメントは垂直方向のセンタリングを設定します。

CSSでテキストを中央揃えにする方法

このチュートリアルの動作環境: 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ビデオチュートリアル)

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>

ログイン後にコピー

レンダリング:

CSSでテキストを中央揃えにする方法

##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>

ログイン後にコピー

レンダリング:

CSSでテキストを中央揃えにする方法

説明:vertical-align:middle display:table-cell は、単一行テキストと複数行テキストを有効にできます。すべて中心にあります。ただし、table-cell はインライン型であるため、元のブロックレベルの要素が div ごとに同じ行に移動されます。行を 2 つの行に分割する必要がある場合は、位置を制御するために外側に追加のコンテナーを追加する必要があります。

プログラミング関連の知識について詳しくは、プログラミングビデオをご覧ください。！

以上がCSSでテキストを中央揃えにする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。