CSS の中央揃えを実現するにはどうすればよいですか? ?CSS の共通メソッド centering_html/css_WEB-ITnose

出典: http://www.ido321.com/824.html

1. 水平方向の中央揃え

1. インライン要素の中央揃え: 親ブロックレベル要素を基準にして中央揃え

   1: .center-children {

   2:   text-align: center;

   3: }

2. ブロックレベルの要素を中央に配置します: margin-left と margin-right を auto に設定して中央に配置します (幅も設定します。そうしないとコンテナ全体が埋まってしまい、中央揃えの効果が見えなくなります)

   1: .center-me {

   2:   margin: 0 auto;

   3: }

行内で水平方向の中央に配置する必要があるブロックレベルの要素が多数ある場合は、別の表示タイプを使用するのが最善です。以下は、inline-block と flex を使用した例です。

デモアドレス: http://jsfiddle.net/Web_Code/5fvrwwk1/embedded/result/

   1: <main class="inline-block-center">

   2:   <div>

   3:     I'm an element that is block-like with my siblings and we're centered in a row.

   4:   </div>

   5:   <div>

   6:     I'm an element that is block-like with my siblings and we're centered in a row. I have more content in me than my siblings do.

   7:   </div>

   8:   <div>

   9:     I'm an element that is block-like with my siblings and we're centered in a row.

  10:   </div>

  11: </main>

  12: <main class="flex-center">

  13:   <div>

RREE RREE RREE RREE RREE

CSS :

RREE RREE RREE RREE RREE RREE RREE RREE RREE RREE RREE RREE RREE RREE RREE RREE RREE RREE RREE RREE RREE RREE RREE RREE RREE RREE RREE RREE RREE RREE

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

1. インライン要素: 上下のパディングを等しく設定する、またはuse line-height

  14:     I'm an element that is block-like with my siblings and we're centered in a row.

  15:   </div>

  16:   <div>

  17:     I'm an element that is block-like with my siblings and we're centered in a row. I have more content in me than my siblings do.

テキストが折り返されない場合、line-height を使用してテキストを高さと等しくすることでテキストを揃えることができます。

  18:   </div>

  19:   <div>

  20:     I'm an element that is block-like with my siblings and we're centered in a row.

  21:   </div>

  22: </main>

複数行のテキストは、上下のパディングを使用して中央揃えにすることもできますが、この方法が機能しない場合は、これらの単語のコンテナを表セル モードで表示できます。次に、テキストのvertical-align属性を整列するように設定します。

デモアドレス: http://jsfiddle.net/Web_Code/5fvrwwk1/1/embedded/result/

html:

   1: body {

   2:   background: #f06d06;

   3:   font-size: 80%;

   4: }

   5: main {

   6:   background: white;

rree rree

   7:   margin: 20px 0;

   8:   padding: 10px;

css

   9: }

  10: main div {

  11:   background: black;

rree rree rree

  12:   color: white;

  13:   padding: 15px;

  14:   max-width: 125px;

  15:   margin: 5px;

  16: }

  17: .inline-block-center {

  18:   text-align: center;

  19: }

RREE RREE RREE RREE RREE RREE RREE RREE RREE RREE RREE RREE RREE RREE RREE RREE RREE RREE RREE RREE RREE RREE RREE RREE RREE RREE RREE RREE RREE RREE RREE RREE RREE RREE RREE

2. ブロックレベルの要素

要素の高さが固定されている場合は、次のように垂直方向の中央に配置できます

  20: .inline-block-center div {

  21:   display: inline-block;

  22:   text-align: left;

  23: }

  24: .flex-center {

  25:   display: flex;

  26:   justify-content: center;

  27: }

   1: .link {

要素の高さがわからない場合、その後、これを行うことができます

   2:   padding-top: 30px;

   3:   padding-bottom: 30px;

   4: }

   1: .center-text-trick {

   2:   height: 100px;

   3:   line-height: 100px;

   4:   white-space: nowrap;

   5: }

フレックスボックスも使用できます

   1: <table>

   2:   <tr>

   3:     <td>

   4:       I'm vertically centered multiple lines of text in a real table cell.

   5:     </td>

RREE RREE RREE RREE RREE RREE RREE RREE RREE RREE RREE RREE RREE

   6:   </tr>

   7: </table>

   8: <div class="center-table">

   9:   <p>I'm vertically centered multiple lines of text in a CSS-created table layout.</p>

  10: </div>

   1: body {

   2:   background: #f06d06;

   3:   font-size: 80%;

   4: }

3. 水平方向と垂直方向の中央揃え

1. 要素の高さと幅は固定です。最初に絶対に中央に配置してから、次の方法で上と左に移動します。幅の 50%

   5: table {

   6:   background: white;

   7:   width: 240px;

   8:   border-collapse: separate;

   9:   margin: 20px;

  10:   height: 250px;

  11: }

  12: table td {

  13:   background: black;

  14:   color: white;

  15:   padding: 20px;

2. 要素の高さと幅は不明または可変です。transofrm 属性を使用してマイナスを変換します50%両方向

rree rree

  16:   border: 10px solid white;

rree rree rree

  17:   /* default is vertical-align: middle; */

  18: }

  19: .center-table {