將文本垂直對齊到圖像的中間

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 ]; } .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>