CSSでテキストを中央揃えにする方法-フロントエンドQ&A-php.cn

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

藏色散人

リリース： 2023-01-05 16:07:51

オリジナル

3475 人が閲覧しました

CSS でテキストを中央揃えにする方法: 最初に HTML サンプルファイルを作成し、次に本文にテキストコンテンツを定義し、最後に「text-align」または「line-height」属性を使用してテキストを水平方向に中央揃えにします。または縦方向にそれだけです。

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

この記事の動作環境: Windows7 システム、HTML5&&CSS3 バージョン、Dell G3 コンピューター。

text-align 属性を使用してテキストを水平方向に中央揃えにします

text-align 属性はテキストの配置を指定します要素内の水平方向の配置。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: pink;
text-align:center;
}
</style>
</head>
<body>
<div class="box">css 水平居中了--文本文字</div>
</body>
</html>

ログイン後にコピー

レンダリング:

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

line-height 属性を使用して、テキストの 1 行を垂直方向の中央に配置します。

line-height プロパティは、行間の距離 (行の高さ) を設定します。負の値は許可されません。

このプロパティは、ラインボックスのレイアウトに影響します。ブロックレベルの要素に適用すると、その要素内のベースライン間の最大距離ではなく、最小距離が定義されます。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css 垂直居中</title>
<style>
.box {
width: 300px;
height: 300px;
background: paleturquoise;
line-height:300px;
}
</style>
</head>
<body>
<div class="box">css 垂直居中了--文本文字</div>
</body>
</html>

ログイン後にコピー

レンダリング:

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

vertical-align:middle display:table-cell を使用して、複数行のテキストを垂直方向に中央揃えにします

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css 垂直居中</title>
<style>
.box {
width: 300px;
height: 300px;
background: paleturquoise;
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 ビデオチュートリアル】

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