html - 从右中间开始带图标的数字

Question

我有一个数字，我想在它旁边放一个星形图标，但在中间。

数字的字体大小可以改变，但星号应该留在中间。

例如:

这是我的CSS:

.my-container {
    display: inline-block;
}

.my-text {
    font-family: "Courier-new";
    font-size:20px
}

.my-icon {
    vertical-align: middle;
    font-size: 10px;
}

.my-container {
  display: inline-block;
}

.my-text {
  font-family: "Courier-new";
  font-size: 20px
}

.my-icon {
  vertical-align: middle;
  font-size: 10px;
}

<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.no-icons.min.css" rel="stylesheet"/>
<link href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css" rel="stylesheet"/>
<div class="my-container">
  <span class="my-text">5</span>
  <span class='icon icon-star my-icon'></span>
</div>

这是我的 jsfiddle:http://jsfiddle.net/k48ttuLn/

Answer 1

我会为此使用 flexbox。无论内容大小如何，它都会垂直居中。

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

.my-text {
  font-family: "Courier-new";
  font-size: 20px
}

.my-icon {
  vertical-align: middle;
  font-size: 10px;
}

<div class="my-container">
  <span class="my-text">5</span>
  <span class='icon icon-star my-icon'></span>
</div>

参见 A guide to flexbox更多示例和教程