61463


フォーカスしてフォントサイズを変えると他とliの位置が変化しますがこれをどうにか一律に揃えたいです  
vertical-alignとtext-alignを試してみましたがうまくいきませんでした  
なので何か別の原因だと思いますが調べてもわかりませんでした

[code]

    ul {
      vertical-align: middle;
      text-align: center;
    }
    
    li {
      background-color: #1ab2fa;
      display: inline-block;
      width: 150px;
      height: 100px;
    }
    
    li:focus {
      background-color: #bb2a3f;
      font: 25px bold;
    }
[/code]

[code]

    <ul>
      <li tabindex=-1>新着</li>
      <li tabindex=-1>月間</li>
      <li tabindex=-1>週間</li>
      <li tabindex=-1>総合</li>
    </ul>
[/code]


CC BY-SA 4.0
2019-12-15T16:02:39.460
61462
2019-12-15T16:54:20.353
37046
question
html css
フォーカスしてフォントサイズを変えると他とliの位置が変化するのを直したい


`vertical-align` プロパティの **初期値は`baseline`** であり、このプロパティでは **継承が行われません**
。そのため、文字の下部はテキストのベースラインに合わせられており、 `ul` 要素の `vertical-align` プロパティは、これらの `li`
要素に影響を及ぼしません。

この問題を解決するためには、直接 `li` 要素に対して `vertical-align` プロパティを適用する必要があります。また、今回の場合 `ul`
要素への `vertical-align` プロパティの指定は不要です。

[code]

    ul {
      text-align: center;
    }
    
    li {
      background-color: #1ab2fa;
      display: inline-block;
      width: 150px;
      height: 100px;
      vertical-align: middle; /* 移動 */
    }
    
    li:focus {
      background-color: #bb2a3f;
      font: 25px bold;
    }
[/code]

[code]

    <ul>
      <li tabindex=-1>新着</li>
      <li tabindex=-1>月間</li>
      <li tabindex=-1>週間</li>
      <li tabindex=-1>総合</li>
    </ul>
[/code]


CC BY-SA 4.0
2019-12-15T16:54:20.353
61463
2019-12-15T16:54:20.353
32986
61462
answer