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

【问题标题】：css:before : align multiple line of texts with imagecss:before ：将多行文本与图像对齐
【发布时间】：2018-06-25 18:48:57
【问题描述】：

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

如何垂直对齐文本，尤其是多行文本时？

看看我的sn-p

.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>

【问题讨论】：

为什么投反对票？好的，我应该解释一下我之前尝试过的事情（我尝试过 vertical-align: middle; 可以工作）。如果您不投票解释为什么这个问题不好，那就太好了：它可以帮助我改进它。

标签： css vertical-alignment

【解决方案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>

【讨论】：