css_html/css_WEB-ITnose での水平方向の中央揃えのさまざまな方法

水平方向の中央揃えと言えば、非常に簡単だと思うかもしれません。 text-align:center でOKです。

しかし、このように書いてもうまくいかないことがあります。理由は何ですか？ 下を見てください。

水平方向のセンタリング: ブロックレベル要素のセンタリングとライン要素のセンタリングに分けられます

インライン要素:

インライン要素はインライン要素です。たとえば、、、、、 などです。 。

「text-align:center」スタイルでコンテナを直接構築すると、それに含まれるすべてのインライン要素が中央揃えになります。

 <div style="text-align:center;border-style:solid">        <p style="border-style:solid">我是块级元素，我不居中</p>        <span style="border-style:solid">我是行内元素，我要居中</span>    </div>

効果は次の図のとおりです:

何か間違っていることに気づきましたか? なぜブロック レベルの要素が中央に「見える」のでしょうか?

に幅を追加すると:

 <div style="text-align:center;border-style:solid">        <p style="border-style:solid;width:500px">我是块级元素，我不居中</p>        <span style="border-style:solid">我是行内元素，我要居中</span>    </div>

結果は以下のようになります:

中のテキストのみが中央に配置されることがわかります

次に、ブロックレベルがどのように配置されるかを見てみましょう。要素が中央に配置されます。ブロックレベルの要素で高さと幅を設定できることは誰もが知っているため、これは固定幅と可変幅に分けられます。

固定幅は実際には非常に簡単な解決策です。 margin:0 auto を使用してコンテナを中央に配置し、text-align:center を追加してテキストを中央に配置するだけです。

すごいです

効果は次のとおりです:

この種のナビゲーション バーなど、実際には可変幅が最もよく使用されます:

でナビゲーションバーは変化するため、幅を固定することはできません。中央揃えの方法は3つありますが、そのうちの1つであるtableタグの特性を利用する方法は、あまり応用性が良くないような気がするので紹介しません。

1. 要素をインライン要素 (display:inline) に直接変更すると、text-align:center を使用できます。ただし、幅と高さを設定することはできません。

css:

    <p style="border-style:solid;text-align:center;margin:0 auto;width:500px">我是定宽块级元素，我要居中</p>

body:

  .container{    text-align:center;}.container ul{    list-style:none;    padding:0;    display:inline;}.container li{    margin-right:8px;    border-style: solid;<br />    display:inline;}

影響下:

2. 親要素のフローティングと相対配置と lelf:50% を使用します。子要素はまだ設定されていますが、残りは -50% です。

修正された CSS コード:

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

テクスチャなしで効果は同じです。 (まず、ul の幅が 100% ではなく、数 li の幅の合計になるように、ul を左フローティングに設定します。次に、ul の相対位置を left を使用して、ul を劇中の位置に移動します。相対位置決めは元の位置を原点とするので、まずサブ要素の左側が中心線になるように中央全体を左:-50% または右:50% まで移動させます。中央に配置されます)

フローティングについては、この記事を参照してください: http://www.th7 .cn/web/html-css/201401/17089.shtml