CSS の高度な CSS スキルの共有

水平方向のセンタリングを設定するには?

インライン要素とブロックレベル要素の2つの状況があります

1. インライン要素（写真やテキストなど）

   div.textcenter{
   text-align:center;
   }
   <div class="textcenter">hello joe!</div>

2. ブロックレベル要素

ブロックレベル要素の水平方向のセンタリングは2つに分割されます種類: 固定幅ブロック要素と非固定幅ブロック要素

固定幅ブロック要素 (つまり、ブロック要素の幅の値が固定値):

左記の設定で実現可能

   div{
   border:1px solid red;
   width:500px;/*定宽*/
   margin:30px auto;/*margin-right margin-left为auto*/
   }
   <div>I am middle placed.</div>

固定幅ブロック

可変幅の要素 (つまり、ページング ナビゲーションなど、幅が不確か) を水平方向にセンタリングするには、(一般的に使用される) 3 つの方法があります。 Web ページ上):

最初の方法: table タグを使用します

table タグ プロパティの長さ調整を使用します。つまり、長さは定義されず、親要素の長さにデフォルト設定されません。 body（表の長さはその中のテキストの長さに応じて決定されます）なので、固定幅のブロック要素とみなして、固定幅のブロック状の中央マージンメソッドを使用して水平方向に中央揃えにすることができます。

ステップ 1: 中央に配置する必要がある要素の外側に table タグ (、、 を含む) を追加します。

ステップ2: この表の「左右の余白を中央に」設定します(これは固定幅ブロック要素と同じ方法です)。

   table{
   margin: 0 auto;
   }
   ul{list-style:none;/*将小圆点去掉*/}
   li{float:left;display:inline;margin-right:5px;}
   <table>
       <tbody>
           <tr> <td>
            <ul>
                <li><a href="#">1</a></li>
                <li><a href="#">2</a></li>
                 <li><a href="#">3</a></li>
                 <li><a href="#">4</a></li>
             <ul>
            </td></tr>
       </tbody>
   </table>

2 番目の方法: ブロックレベル要素の表示タイプをインラインタイプに変更し (「インライン要素」表示に設定)、text-align:center を使用して中央揃え効果を実現します。以下の例:

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

最初の方法と比較すると、非セマンティックタグ(テーブル)を追加する必要はありませんが、liはインライン要素とみなされ、高さ、幅などの属性を設定できません

3 番目の方法: 親要素に Set float を指定してから、親要素に Position:relative と left:50% を設定し、子要素に Position:relative と left: -50% を設定して、水平方向のセンタリングを実現します。

2. 垂直方向のセンタリングを設定するにはどうすればよいですか?

親要素の高さが決まっている単行テキストと、親要素の高さが決まっている複数行テキストの2つの状況に分けられます。

単一行テキスト: line-height と height を一致させることで垂直方向のセンタリングが実現されます

line-height と font-size の計算値の差が CSS における「行間隔」になります。それを 2 つに分割し、テキスト行の上部と下部に追加します。

この種のテキスト行の高さとブロックの高さには欠点が生じます。テキスト コンテンツの長さがブロックの幅よりも大きい場合、コンテンツがブロックからはみ出してしまいます。

   .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;
   }
   <div class="container">
     <ul>
         <li><a href="#">1</a></li>
         <li><a href="#">2</a></li>
         <li><a href="#">3</a></li>
         <li><a href="#">4</a></li>
     </ul>
   </div>

しかし、この方法には欠点があります。テキストの長さがブロックの幅より長い場合、コンテンツがブロックからはみ出してしまいます。

複数行テキスト:

方法は 2 つあります:

table タグを使用する方法と、vertical-align:middle を使用する方法 (td タグにはデフォルトでvertical-align:middle が設定されていることに注意してください

手動で設定します

最後のトリック

次の 2 つのステートメントのいずれかを要素に設定する場合:

float:right または float:right

position:absolute

要素の表示タイプは自動的に display:inline-block に変更されます。このとき、要素の幅と高さを設定できます。たとえば

.container{
    line-height:100px;
    height:100px;
    background:purple;
}
<div class="container"><h1>Hello World!</div>

。

以上がCSS の高度な CSS スキルの共有の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。