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

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

藏色散人

リリース： 2023-01-06 11:16:17

オリジナル

86374 人が閲覧しました

htmlテキストを中央揃えにする方法: 1. 「text-align:center;」属性を使用して、テキストを水平方向に中央揃えに設定します。 2. 「line-height:height;」属性を使用して、テキストを垂直方向に中央揃えに設定します。 " 属性。

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

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

HTML テキストの中央揃えコードの具体的な例は次のとおりです。

<!DOCTYPE HTML>
<html>
<head>
 <title>html文字居中测试</title>
 <meta charset="UTF-8">
 <style type="text/css">
 body{background: #ddd;}
 div{width:300px;height:180px;margin:10px auto;color:#fff;font-size:24px;}
 .box1{background: #71a879;text-align: center;}
 .box2{background: #6a8bbc;line-height: 200px;}
 .box3{background: #dea46b;text-align: center;line-height: 200px;}
 </style>
</head>
<body>
<div >html文字水平居中</div>
<div >html文字垂直居中</div>
<div >html文字水平上下居中</div>
</body>
</html>

ログイン後にコピー

上記のコードの効果は、以下に示すようにローカルでテストされます。

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

#次の重要なポイントを覚えておいてください。HTML では、テキストを中央揃えにする CSS コード:

1. 水平方向の中央揃え: text-align:center;

text-align 属性は、要素内のテキストの水平方向の配置。

この属性は、行ボックスが整列する位置を指定することによって、ブロックレベル要素内のテキストの水平方向の整列を設定します。値 justify は、ユーザーエージェントが行コンテンツ内の文字と単語の間の間隔を調整できるようにすることでサポートされており、ユーザーエージェントによって異なる結果が得られる場合があります。

2. 垂直方向のセンタリング: line-height:height;

line-height プロパティは、行間の距離 (行の高さ) を設定します。

注: 負の値は許可されません。

【推奨学習:

html ビデオチュートリアル】

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