css:before : 将多行文本与图像对齐

Question

我用 css:before 在图像后显示文本

如何垂直对齐文本，特别是当有多行文本时？

看我的片段

.link-container {
  vertical-align: middle;
}

.link-container:before {
  vertical-align: inherit;
  content: url("http://via.placeholder.com/50x50");
  padding-right: 20px;
}

<p class="link-container">
  <a class="text-download" href="#">Link#1</a>
</p>

<p class="link-container">
  <a class="text-download" href="#">Link#2</a><br>
  <a class="text-download" href="#">Link#3</a>
</p>

Answer 1

使用图像作为背景，然后你可以轻松地使用 flexbox 将内容居中，例如:

.link-container {
  padding-left: 55px;
  min-height: 50px;
  background: url("http://via.placeholder.com/50x50") left center/50px 50px no-repeat;
  display:flex;
  flex-direction:column;
  justify-content:center;
  
}

<p class="link-container">
  <a class="text-download" href="#">Link#1</a>
</p>

<p class="link-container">
  <a class="text-download" href="#">Link#2</a>
  <a class="text-download" href="#">Link#3</a>
</p>

<p class="link-container">
  <a class="text-download" href="#">Link#2</a>
  <a class="text-download" href="#">Link#3</a>
  <a class="text-download" href="#">Link#4</a>
</p>