Question

我有一个文字标签，我想在图像前加上它。问题是我的文字只是正常大小，我们假设它是font-size: 12px;，而图像要大得多，它有height: 32px;。当我尝试做的时候：

<li>
  <span class="download">
    <a href="#abc">download something</a>
  </span>
</li>

/* a element CSS */
left: 30px;
margin-left: 30px;

/* a:before pseudoelement CSS */
content: '';
width: 24px;
height: 32px;
position: absolute;
top: 2px;
left: 0px;
background-position: 0 -88px;

我或多或少地得到了这样的东西：

III text text text
III
III

我想要的是：

III
III text text text
III

问题是使用:before文本会垂直对齐到顶部，我希望它垂直居中。我怎么能这样做？

Answer 1

要使文本垂直居中，文本的行高等于图像高度

line-height: 32px;

Answer 2

您可以尝试的一个选项是使用line-height。

如果您知道li具有特定的高度，那么您可以将a标记设置为具有相同的line-height

li {
    height: 50px;
}

li a {
    line-height: 50px;
}

这会将文本居中于div。

然后您需要做的就是更改一些css，让它从左侧进一步定位（例如margin-left）以及您想要的任何其他样式。

Answer 3

在您的父元素line-height）上使用a，并将其显示设为inline-block（不要忘记position: relative以获取您的伪元素位置很好）：

＆＃13;

a {
  position: relative;
  padding-left: 30px;
  display: inline-block;
  line-height: 32px;
  font-size: 12px;
}

a:before {
  content: '';
  background-image: url(http://placehold.it/24x32);
  width: 24px;
  height: 32px;
  position: absolute;
  top: 0;
  left: 0;
  background-position: center center;
}

＆＃13;

<li>
  <span class="download">
    <a href="#abc">download something</a>
  </span>
</li>

＆＃13;

Answer 4

1）从伪元素中删除定位。

2）在伪元素

上设置vertical-align: middle;

<强> FIDDLE

ul {
  list-style-type: none;
}
a {
  margin-left: 30px;
}
a:before {
  content: '';
  display: inline-block;
  width: 24px;
  height: 32px;
  vertical-align: middle;
  background: url(http://placehold.it/24x32);
}

<ul>
  <li>
    <span class="download">
    <a href="#abc">download something</a>
  </span>
  </li>
</ul>

Answer 5

将display:table用于父级，将display:table-cell用于子级

CSS：在伪元素之前：垂直居中

5 个答案: