html - 无法制作具有边框半径的圆并将其与下一个元素垂直对齐

Question

结果如下

我想要实现的是

1. 一个灰色圆圈围绕着“<”，字母位于中心

2. 它和“无标题”垂直居中对齐

然而，尽管将宽度和高度设置为相同的大小，“圆形”最终仍然是椭圆形。

使用flex的align-items: center;也无法实现对齐。

如何修复CSS？这是示例代码的链接

html

<div class='flex-container'>   
  <div class='arrow-container'>
      <a class='btn-icon' href='#'>
        <span class='square-btn icon icon-back'></span>
      </a>
  </div>
  <div class=title>
        <a href='#'>Untitled
        </a>
  </div>
</div>

CSS

.flex-container {
  display: flex;
  align-items: center;
}

.icon {
  font-size: 50px;
}

.icon-back::before {
  content: '<';
}

.title {
  margin-left: 5px;
  font-size: 50px;
}

.square-btn {
  height: 50px;
  width: 50px;  
}

.btn-icon {
  padding: 5px;
  border-radius: 50%;
  background-color: gray;
  text-decoration: none;
}

Answer 1

这似乎有效。 HTML 没有更改。

.flex-container {
    display: flex;
    align-items: center;
}

.icon {
    font-size: 50px;
}

.icon-back::before {
    content: '<';
}

.title {
    margin-left: 5px;
    font-size: 50px;
}

.square-btn {
    height: 50px;
    width: 50px;
    border-radius: 50%;                    /* new */
    background-color: gray;                /* new */
    display: flex;                         /* new */
    align-items: center;                   /* new; align arrow vertically */
    justify-content: center;               /* new; align arrow horizontally */
}

.btn-icon {
    /* padding: 5px;                        <-- remove */
    /* border-radius: 50%;                  <-- remove */
    /* background-color: gray;              <-- remove */
    text-decoration: none;
}

<div class='flex-container'>
    <div class='arrow-container'>
        <a class='btn-icon' href='#'>
            <span class='square-btn icon icon-back'></span>
        </a>
    </div>
    <div class=title>
        <a href='#'>Untitled
        </a>
    </div>
</div>

jsFiddle