vertical-alignのいくつかの注意点


vertical-align


参考博文

1.vertical-align有効シーン

  • 要素自体のdisplayをinlineまたはinline-block
  • に設定

    2.vertical-alignによる中央揃え


    vertical-alignプロパティは、要素の垂直位置合わせを設定します.このプロパティは、行内の要素のベースラインを、その要素が行のベースラインに対して垂直に位置合わせすることを定義します.負の長さ値とパーセンテージ値を指定できます.これにより、要素が上昇するのではなく低下します.表のセルでは、セル・ボックス内のセルの内容の配置を設定します.
  • は、表のプロパティによって、要素の中央
  • を制御する.
  • は、空の要素を設定することによって、空の要素height:100%を、ターゲット要素をその要素に対して
  • にする.

    3.コード終了

    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="ie=edge" />
        <title>Document</title>
        <style>
          div {
         
            margin: 50px 0;
          }
    
          .box {
         
            width: 200px;
            height: 200px;
            background: red;
            color: #fff;
          }
    
          .t1 {
         
            background: blue;
            vertical-align: middle;
          }
    
          .t2 {
         
            background: green;
            height: 100%;
            display: inline-block;
            vertical-align: middle;
          }
    
          .box2 {
         
            background: black;
            color: white;
            line-height: 50px;
            display: inline-block;
          }
          .dot {
         
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background: red;
            vertical-align: 0.5px;
            display: inline-block;
          }
    
          .box3 {
         
            display: table-cell;
            vertical-align: middle;
            background: blue;
            color: #fff;
            height: 300px;
            width: 300px;
          }
        </style>
      </head>
      <body>
        <div class="box">
          <span class="t1">12312312</span>
          <span class="t2"></span>
        </div>
        <div class="box2"><span class="dot"></span>1231231231231</div>
        <div class="box3">
          <span>    </span>
        </div>
      </body>
    </html>
    
    
  • box 1は、空の要素を追加することによって中央
  • を実現する.
  • box 3は、親要素にdisplay:tabel-cellを追加することによってテーブルに変更し、vertical-align:middleによってサブ要素の中央
  • を実現する.
  • box 2 dotのvertical-alignをmiddleに設定することにより、bottom(bottomはその要素全体の底部)、top、text-bottom(文字の底部に対して平行)