Question

我的盒子排成一行，但33不在中心，https://jsfiddle.net/y7jqjwsx/

<div class="LargeStarBox">
<span class="LargeStar glyphicon glyphicon-star "></span>
<span class="LargeStar glyphicon glyphicon-star "></span>
<span class="LargeStar glyphicon glyphicon-star-empty"></span>
<span class="LargeStar glyphicon glyphicon-star-empty"></span>
<span class="LargeStar glyphicon glyphicon-star-empty "></span>
<span class="LargeStarFont glyphicon ">33</span>
</div>

// css

.LargeStarBox {
  width: 200px;
  border: 1px solid black;
  text-align: center;
}

    .LargeStar {
      font-size: 20px;
      color: #D9AB4D;
      border: 1px solid black;
      margin-top: 7px;
    }

    .LargeStarFont {
      font-size: 20px;
      color: blue;
      margin-left: 10px;
      border: 1px solid black;
      vertical-align: center;
    }

Answer 1

我使用了一个外部容器和一个内部容器来垂直对齐数字文本。外容器有显示器：table;内部容器有显示：table-cell; vertical-align：middle; （vertical-align：center不是有效的CSS属性）。

HTML

<span class="numberFont">
    <span class="number-outer">
      <span class="number-inner">33</span>
    </span>
</span>

CSS

.numberFont {
  font-size: 15px;
  color: blue;
  margin-left: 10px;
  font-family: 'Glyphicons Halflings';
  -webkit-font-smoothing: antialiased;
  font-style: normal;
  font-weight: normal;
  display: inline-block;
  position: relative;
  top: 1px;
  height: 22px;
}

.number-outer {
  display: table;
  border: 1px solid black;
  padding: 0px 3px;
}

.number-inner {
  display: table-cell;
  vertical-align: middle;
}

我还做了一些小的CSS更改以匹配星形框的大小：

https://jsfiddle.net/rmurph46/7ed4u378/2/

如何将文本与bootstrap glyph-icon对齐？

1 个答案: