1

我有一个列表，其中包含几个包含文本的列表项。我正在使用 :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;
}
4

5 回答 5

2

添加：

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

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

于 2013-07-31T10:06:05.897 回答
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>

于 2013-07-31T10:46:20.270 回答
0

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

于 2013-07-31T10:05:19.917 回答
0

我对您的样式和 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>
于 2013-07-31T10:31:45.970 回答
0

我刚刚找到了一种方法来做到这一点。不敢相信我在发布之前没有尝试过。

    .stats .messages:before {
        content: url(../images/messages.png);
        opacity: 0.2;
        position: relative;
        top: 10px;
    }
于 2013-07-31T10:10:55.243 回答