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>