如何正确对齐圆圈图标与文本

Question

我正在尝试在bootstrap列中实现类似的东西（我不太关心样式，但是对齐）：

基本上，到目前为止我尝试过的是：

<div class="circle">NA</div>
<div class="author">
  <p>Some text</p>
 <p><strong>Should appear here</strong></p>
</div>

其中circle是：

.circle {
  float: left;
  width: 45px;
  height: 45px;
  border-radius: 50%;
  font-size: 15px;
  color: #fff;
  line-height: 45px;
  text-align: center;
  background: #66fbd1;
} 

我也应用了较小的行高：

.author {
    line-height: 50%;
}

我已经尝试将圆圈div浮动到左侧，但是，我得到了这个：

我不确定是否：

a）考虑到图标和文字应沿垂直轴“居中”这一事实，浮动是正确的方式

b）如果我通过浮动完成此操作，我将如何使文本与图标更加垂直对齐？这只是调整权利margin-top？

的问题

顺便说一句，我知道我可以用Flexbox解决其中的一些问题，不过，我不允许在这里使用它。

Answer 1

如果您不允许使用flexbox，inline-block可能是您的解决方案。使用float时，将忽略垂直对齐。但使用display: inline-block时不会忽略它。试试这个：

＆＃13;

＆＃13;

.circle {
  display:inline-block;
  width: 45px;
  height: 45px;
  border-radius: 50%;
  font-size: 15px;
  color: #fff;
  line-height: 45px;
  text-align: center;
  background: #66fbd1;
  vertical-align:middle;
} 

.author {
  line-height: 40%;
  display:inline-block;
  vertical-align:middle;
}

＆＃13;

<div class="circle">NA</div>
<div class="author">
  <p>Some text</p>
 <p><strong>Should appear here</strong></p>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

此外，如果文字很大且动态，那么有不同的方法。有许多方法，但基于您的标记，您可以应用以下CSS代码：

.circle {
  float: left;
  width: 45px;
  height: 45px;
  border-radius: 50%;
  font-size: 15px;
  color: #fff;
  line-height: 45px;
  text-align: center;
  background: #66fbd1;
  margin-right: 10px;
  font-family: arial;
}
.author {
  font-family: arial;
  padding: 5px 0 0 0;
  line-height:20px; 
}
.author p {
  margin: 0;
}

Answer 3

ResourseSupport怎么样？ ：）

display: table;