CSSでテキストの配置を設定する方法

方法: 1. "text-align:center" または "margin:0 auto" を使用して水平方向の中央揃えを設定します。 2. "line-height:value" または "display:table-cell" を使用します。 「vertical-align:middle」は垂直方向の中央揃えを設定します。

このチュートリアルの動作環境: Windows 7 システム、CSS3&&HTML5 バージョン、Dell G3 コンピューター。

1. 水平方向の中央揃え:

(1).インライン要素の水平方向の中央揃え?

設定要素がテキストやピクチャなどの場合、インライン要素、親要素に text-align:center を設定して、インライン要素を実現します。子要素の表示を inline-block に設定して、子要素がインライン要素になるようにします

 
DEMO
 

(2) ブロック要素の水平方向の中央揃え（固定） width)

設定される要素が固定幅のブロックレベル要素の場合、text-align: center の使用は機能しません。 「左右のマージン」の値を「自動」に設定することでセンタリングを実現できます。

 
DEMO
 

(3)ブロック要素の水平方向の中央揃え(幅不定)

実際の作業ではこれに遭遇します。 Web ページ上のページング ナビゲーションなど、「可変幅のブロック レベル要素」のセンタリングを設定します。ページングの数は不確実であるため、幅を設定することで柔軟性を制限することはできません。

これを実現するには、可変幅のブロックレベル要素に text-align:center を直接設定するか、親要素に text-align:center を追加して中央揃え効果を実現します。

可変幅ブロックレベル要素の幅が1行に満たない場合、表示をインライン型またはインラインブロック(インライン要素表示またはインラインブロック要素に設定)に設定できます。

.child{ width: 200px; margin: 0 auto; }

 
 
1
 
2
 
3
 
 

2. 垂直方向のセンタリング:

は水平方向のセンタリングと同じです。ここでは垂直方向のセンタリングについて説明します。 2 つの条件を設定します。親要素はボックス コンテナであり、高さが設定されています。

シナリオ 1: 子要素はインライン要素です。

#

.container{text-align:center;background: beige} .container ul{list-style:none;margin:0;padding:0;display:inline-block;} .container li{margin-right:8px;display:inline-block;}

 111111 

この場合、子要素の高さは実際には不明であり、パディングやマージンを計算して調整することはできませんが、解決策はまだいくつかあります。display:table-cell;vertical-align:middle を親要素に設定することで解決しました

.wrap{ width:200px ; height: 300px; line-height: 300px; border: 2px solid #ccc; } .span{ background: red; }

 
11111
 

Result

# #シナリオ 3: 子要素はブロック レベルの要素であり、高さが設定されています。

子要素の margin-top または margin-bottom を計算します。計算方法は親 (要素の高さ)子要素の高さ)/2

.wrap{ width:200px ; height: 300px; border: 2px solid #ccc; 　　　　display: table-cell; 　　　　vertical-align: middle; } .non-height{ background: green; }

 
111111
 

推奨チュートリアル: 「CSS ビデオ チュートリアル

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