flexboxを使った上下中央揃えについて

Question

【記載箇所誤ったため修正】

下記コードで、半円の中の要素が上下左右ちゃんと真ん中にきません・・・
なぜ上側にくっついてしますのかわかりません。

    <div class="circle-wrapper">
      <div class="circle">
        <a href="#">
          <svg width="1.5em" height="1.5em" viewBox="0 0 16 16" class="bi bi-chevron-up" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
          <path fill-rule="evenodd" d="M7.646 4.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1-.708.708L8 5.707l-5.646 5.647a.5.5 0 0 1-.708-.708l6-6z"/></svg>
        </a>
      </div>
    </div>

.circle {
  width:50px;
  height:25px;
  border-radius:25px 25px 0 0;
  background-color:#9CB7BD;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
}

.circle a{
  color: white;
}

Comments

[kei344]

CSSが切れているので編集してください。

[_arukuneko]

すみません。編集しました。

Answer 1

半円の中の要素が上下左右ちゃんと真ん中にきません・・・

「半円の中の要素 = SVGで作った矢印」と認識しました。
以下の指定により、上下左右の中央配置が可能になると思います。

.circle a {
  color: white;
  
  /* 追加 */
  display: flex;
  align-items: center;
  justify-content: center;
}

---

<a>や<img>など標準ではdisplay: inline;が指定される要素が微妙にずれる、
というような場合display: block;やdisplay: flex;を指定すると解決することがよくあります。

Comments

[_arukuneko]

ありがとうございました。中央に配置できました。もっと勉強します。

Answer 2

こういうことでしょうか。

.footer-right{
  float: right;
  font-size:12px;
  font-weight: lighter;
  padding-right: 40px; /* ADD */
}
```**動くサンプル：**[https://jsfiddle.net/du9v6yo1/](https://jsfiddle.net/du9v6yo1/)

Comments

[kei344]

https://teratail.com/questions/history-questions/283321
大幅に編集される前の回答です。