水平方向の中央揃え - インライン要素、固定幅ブロック、可変幅ブロック_html/css

水平方向の中央揃え - インライン要素、固定幅ブロック、可変幅ブロック_html/css_WEB-ITnose

WBOY

リリース： 2016-06-24 11:38:51

オリジナル

1251 人が閲覧しました

ステートメント: http://www.imooc.com/learn/9 より

インライン要素

要素がテキスト、画像などのインライン要素に設定されている場合、水平方向の中央揃えは text- を設定することによって行われます。 親要素に整列する :center が実装されています。

固定幅ブロック要素

固定幅とブロック形状の2つの条件を満たす要素は、「左右マージン」の値を「自動」に設定することで中央揃えにすることができます。

1 margin:0 auto;

可変幅のブロック要素

可変幅のブロック要素は 3 つの方法で中央に配置できます (現在、これら 3 つの方法がより頻繁に使用されます):

1. HTML コード:

 1 <div> 2 <table> 3   <tbody> 4     <tr><td> 5     <ul> 6         <li><a href="#">1</a></li> 7         <li><a href="#">2</a></li> 8         <li><a href="#">3</a></li> 9     </ul>10     </td></tr>11   </tbody>12 </table>13 </div>

ログイン後にコピー

CSS コード:

1 table{2     margin:0 auto;3 }4 ul{list-style:none;margin:0;padding:0;}5 li{float:left;display:inline;margin-right:8px;}

ログイン後にコピー

htmlコード:

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

ログイン後にコピー

CSS コード:

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

ログイン後にコピー

最初の方法と比較したこの方法の利点は、非セマンティックなタグを追加する必要がなく、タグのネストの深さが簡素化されることですが、いくつかの問題もあります。要素がブロックされてしまいます。表示タイプが inline に変更され、inline 要素になるため、長さの値の設定などの一部の機能が欠落しています。

3.HTML コード

親要素に float を設定し、次に親要素にposition:relative および left:50% を設定し、子要素にposition:relative および left:-50% を設定することで、水平方向のセンタリングを実現します。

コードは次のとおりです:

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

ログイン後にコピー

css コード:

<style>.container{    float:left;    position:relative;    left:50%}.container ul{    list-style:none;    margin:0;    padding:0;        position:relative;    left:-50%;}.container li{float:left;display:inline;margin-right:8px;}</style>

ログイン後にコピー

このメソッドは、ブロック要素を保持しつつ、display:block の形式で表示できるという利点があります。タグは追加され、インレイは追加されませんが、その欠点は、position:relative が設定されているため、特定の副作用が生じることです。

これら 3 つの方法は広く使用されており、どの方法を選択するかは特定の状況によって異なります。