对齐glyphicon旁边的数字

Question

我似乎无法将此数字与字形对齐内联。我希望将数字3向上推，以便它排成一行。

CSS

body {
        background-image: url("bg1.png");
}
.icons {
        margin: 0px 0px 0px 10px;
}
.well {
  min-height: 20px;
  padding: 20px;
  margin-bottom: 20px;
  background-color: #ecf0f1;
  border: 1px solid transparent;
  border-radius: 4px;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
}
.well blockquote {
  border-color: #ddd;
  border-color: rgba(0, 0, 0, 0.15);
}
.well-lg {
  padding: 10px;
  border-radius: 6px;
}
.well-sm {
  padding: 9px;
  border-radius: 3px;
}
#alertbox {
        padding: 2px 2px 2px 2px;
        text-align: center;
}
#topicon {
        font-size: 50px;
}
#stats {
        font-size: 50px;
        display: inline-block;
        float: right;
}

HTML

 <div class="col-md-3">
      <div class="well well-lg">
           <div id="alertbox" class="alert alert-info">Total APIs</div>
           <span id="topicon" class="glyphicon glyphicon-tasks"></span>
           <span id="stats">3</span>
      </div>
 </div>

截图

使用定位在缩放时不起作用，因为在移动电话上数字3将进入中心。我需要它来自动扩展，我想更小的浏览器。

Answer 1

如果您从#stats移除浮动，则可以执行以下操作：

.well {text-align: justify;}
.well:after{content:""; width: 100%; display: inline-block; height: 0;}
span {display: inline-block; vertical-align: middle;}