Question

这是结果

我想要实现的是

围绕'＆lt;'的灰色圆圈信中心
它和'无标题'垂直对齐中心

然而，尽管将宽度和高度设置为相同的尺寸，“圆圈”仍然以椭圆形状结束。

使用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

Answer 2

这可以使用单个html元素和pseude-elements来完成。制作一切取决于字体大小的一个好处是，图标与链接的字体大小成比例缩放。

.link {
  font-size: 50px;
  margin-left: 1.1em;
}

.icon {
  position: relative;
}

.icon-back::before {
  content: '<';
  position: absolute;
  left: -.9em;
  display: inline-block;
  z-index: 2;
}

.icon-back::after {
  content: '';
  border-radius: 50%;
  background-color: gray;
  width: 1em;
  height: 1em;
  position: absolute;
  top: 50%;
  left: -1.1em;
  /* Use translateX() and translateY()
  if you care about old browsers */
  transform: translate3d(0, -45%, 0);
}

<a class="link icon icon-back" href="#">Untitled</a>

Answer 3

分组类会使事情变得更难，当css内容不是字母数字文本时，也会使用unicode，试试这个：

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

<style type="text/css">

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


.btn-icon {
 font-size: 50px;
 text-decoration: none;
}

.icon-back::before {
 content: "\003c";
 border-radius: 50%;
 background-color: gray;
 font-size: 40px;
 height:40px;
width:40px;
vertical-align:middle;
display:inline-block;
margin-bottom:5px;
text-align:center;
}

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




</style>

无法使用border-radius创建一个圆，并将其与下一个元素垂直对齐

3 个答案:

jsFiddle