将文本垂直对齐到图像的中间

Question

我有一个列表，其中包含几个包含文本的列表项。 我正在使用：before伪为每个列表项添加一个图像。 图像明显大于文本，因此如何在中间对齐文本或图像？

谢谢

-

我目前看到的内容

我想要实现的目标

HTML

<ul class="stats">
    <li class="messages">2</li>
    <li class="sales">15</li>
</ul>

CSS

.stats {
  list-style: none;
  margin: 0;
  padding: 0;
  float: left;
}
.stats .messages:before {
  content: url(../images/messages.png);
  opacity: 0.2;
}
.stats .sales:before {
  content: url(../images/basket.png);
  opacity: 0.2;
}

Answer 1

添加：

.stats li { line-height: 22px; }

...其中22px是你的图标的高度。

Answer 2

你需要试试这个。

<ul class="stats"> <li><img src="../images/messages.png" style="vertical-align:middle;">2</li> <li><img src="../images/basket.png" style="vertical-align:middle;">15</li> </ul>

Answer 3

使用.stats li{ line-height: [height of image ]; }

Answer 4

我刚刚找到了这样做的方法。不敢相信我在发布之前没试过这个。

    .stats .messages:before {
        content: url(../images/messages.png);
        opacity: 0.2;
        position: relative;
        top: 10px;
    }

Answer 5

我对你的风格和html做了一些改变，试试这个

<style>
.stats {
  list-style: none;
  margin: 0;
  padding: 0;
  float: left;
}
.stats .messages:before {
  content: url(../images/messages.png);
  opacity: 0.2;
  float:left;
}
.stats .sales:before {
  content: url(../images/basket.png);
  opacity: 0.2;
}

</style>

<ul class="stats">
    <li class="messages"><div style="margin-top:1px;float:left;">2</div></li>
    <li class="sales"><div style="margin-top:1px;float:left;">15</div></li>
</ul>