带右侧中间图标的数字

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。无论大小如何，它都会将内容垂直居中。

<?x 0B?>

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

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

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

有关更多示例和教程，请参阅A guide to flexbox

Answer 2

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

Answer 3

我使用了line-height和vertical-align: middle的组合来实现这一目标：

* {
  line-height: 1;
}

.my-container {
  display: inline-block;
  vertical-align: middle;
}

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

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

.big-font .my-text {
  font-size: 2.5em;
}

<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>
<div></div>
<div class="my-container big-font">
  <span class="my-text">15</span>
  <span class='icon icon-star my-icon'></span>
</div>

预览

小提琴：http://jsfiddle.net/hn6ekzo5/