ul,liタグで横並びにし最後の子要素のみを右寄せ、上下中央揃えしたいという場面での問題です。

Question

下記のコードで最後の子要素をpositionで右寄せ、中央揃えしたいのですが、上下が中央に行きません。
transformを使用したらうまくいくのですが、何が原因で上下が出ないのか理解できませんでした。
詳しい方ご教授の程、よろしくお願いいたします。

HTMLの記述

<ul> <li class="chi1">hello</li> <li>hello</li> <li>hello</li> <li>hello</li> <li>hello</li> <li>hello</li> <li>hello</li> <li>hello</li> <li class="chi9">hello</li> </ul>

CSSの記述
ul {
background-color: #eee;
position: relative;
li {
display: inline;
vertical-align: middle;
}
.chi1 {
font-size: 32px;
}
.chi9 {
position: absolute;
top: 0;
bottom: 0;
right: 10px;
margin: 0;
}
}

Answer 1

最短でいうと以下になると思います。

.chi9 {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 10px;
  /* margin: 0; */
  margin: auto 0;
  height: 1em;
}

positino: absolute; + margin-top: auto; + margin-bottom: auto; を使用した上下の中央揃えは、
heightの指定が必要です。

---

liに指定しているdisplay: inline;が、いずれIEやEdgeなどでの表示崩れを起こしそうなので、自分なら以下のようにします。

ul {
  background-color: #eee;
  display: flex;
  align-items: center;
  li {
    display: block;
  }
  .chi1 {
    font-size: 32px;
  }
  .chi9 {
    margin-left: auto;
    margin-right: 10px; /* この余白は、ulにpadding-rightで指定したほうがいい気もしますが */
  }
}

Comments

[5hqch1]

大変勉強になりました！ありがとうございます！