ホームページ > 記事 > ウェブフロントエンド > HTMLテキストの中央揃えのスタイルは何ですか?
html テキストの中央揃えスタイル: 1. 水平方向の中央揃えスタイルは「text-align: center;」です; 2. テキストの垂直方向の中央揃えスタイルは「line-height:px value;」です; 3. テキストの垂直方向の中央揃えスタイルは「表示: flex;align-items: center;」。
このチュートリアルの動作環境: Windows 7 システム、HTML5 バージョン、Dell G3 コンピューター。
#html text center
1. テキストを水平方向に中央揃え --text-align: center;#text-align 属性は、要素内のテキストの水平方向の配置を指定します。
この属性は、行ボックスが整列する位置を指定することによって、ブロックレベル要素内のテキストの水平方向の整列を設定します。値 justify は、ユーザー エージェントが行コンテンツ内の文字と単語の間の間隔を調整できるようにすることでサポートされており、ユーザー エージェントによって異なる結果が得られる場合があります。
left | |
---|---|
#right | |
center | |
justify | |
inherit | |
例: |
CSS ビデオ チュートリアル , "
html ビデオ チュートリアル1), 行-height は 1 行のテキストを垂直方向に中央揃えにします <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css 垂直居中</title>
<style>
.box{
width: 300px;
height: 300px;
background: palegoldenrod;
line-height:300px;
}
</style>
</head>
<body>
<div class="box">css 垂直居中了--文本文字</div>
</body>
</html>
効果画像:
2)、CSS3 flex レイアウトによりテキストが垂直方向に中央揃えになります
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>css 垂直居中</title> <style> .box{ width: 300px; height: 300px; background: paleturquoise; 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>
プログラミング関連の知識については、プログラミング ビデオ
をご覧ください。 !以上がHTMLテキストの中央揃えのスタイルは何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。