使用css选择器对齐图像[重复]

Question

我正在尝试使用 CSS 选择器 :before 将图像放在文本之前。这是我的sn-p

但似乎对齐方式有点偏离。文本未与图像垂直对齐。

.resource {
 	color: #007f00;
    display: inline;
    margin-top: 20px;

}
.resource:before {
	content: '';
    width: 26px;
    height: 20px;
    display: inline-block;
    margin-right:5px;
    background-size: contain;
    background-repeat: no-repeat;
    margin-top: 19px;
    background-image:url("https://www.w3schools.com/bootstrap/cinqueterre.jpg");

}

<div class="resource">Presentation</div>

我在:before 中添加了margin-top，但它不起作用。任何帮助将不胜感激。

Answer 1

实现目标的一种方法是使用Flexbox 和align-items: center。这将使所有项目垂直居中对齐。你也可以删除你的margin-top：

.resource {
  color: #007f00;
  display: flex;
  align-items: center;
}

.resource:before {
  content: '';
  width: 26px;
  height: 20px;
  margin-right: 5px;
  background-size: contain;
  background-repeat: no-repeat;
  background-image: url("https://www.w3schools.com/bootstrap/cinqueterre.jpg");
}

<div class="resource">Presentation</div>

但如果你想知道你为什么把你的图片作为::before 元素会很有趣...

Answer 2

设置 .resource display: inline-block; 并从 .resource 和 :before 中删除 ma​​rgin-top 并添加 vertical-align:middle 与 行高

.resource {
 	color: #007f00;
  display: inline-block;
  line-height: 20px;
  vertical-align: middle;
}
.resource:before {
	content: '';
    width: 26px;
    height: 20px;
    display: inline-block;
    margin-right:5px;
    background-size: contain;
    background-repeat: no-repeat;
    background-image:url("https://www.w3schools.com/bootstrap/cinqueterre.jpg");
    line-height: 20px;
    vertical-align: middle;
}

<div class="resource">Presentation</div>

Answer 3

如果你改变你的 HTML 和 CSS 如下，那么你可以更有效地达到同样的结果：

.resource {
  display: flex;
}

span {
  margin-right: 5px;
  margin-top: 19px;
}

span img {
  height: 20px;
  width: 26px;
}

<div class="resource">
  <span><img src="https://www.w3schools.com/bootstrap/cinqueterre.jpg"/></span>
  <span>Presentation</span>
</div>

Here 是一个指向 JSFiddle 的链接，您也可以在其中看到结果。