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 に設定して、子要素がインライン要素になるようにします

<div class="parent" style="">
  <div class="child" style="">DEMO</div>
</div>

<style>
.parent{text-align: center;}    
.child{display: inline-block;}
</style>

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

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

<div class="parent" style="">
  <div class="child" style="">DEMO</div>
</div>

rrree

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

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

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

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

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

<div class="container">
    <ul>
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
    </ul>
</div>

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;}

<div class="wrap line-height">
    <span class="span">111111</span>
</div>

シナリオ 2:

子要素はブロック レベルの要素ですが、子要素の高さは設定されていません。

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

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

<div class="wrap">
    <div class="non-height ">11111</div>
</div>

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;
        }

<div class="wrap ">
    <div class="div1">111111</div>
</div>

結果

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

」

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