ホームページ >ウェブフロントエンド >フロントエンドQ&A >HTMLでテキストを中央揃えにする方法

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

藏色散人オリジナル: 2021-06-03 10:21:0686287ブラウズ

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 サイトの他の関連記事を参照してください。

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：HTMLが文字化けした場合の対処法次の記事：HTMLが文字化けした場合の対処法

続きを見る