css: before: выровнять несколько строк текста с изображением - PullRequest
Новая
       6

css: before: выровнять несколько строк текста с изображением

0 голосов
/ 25 июня 2018

Я отображаю текст после изображения с помощью 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>

1 Ответ

0 голосов
/ 25 июня 2018

Используйте изображение в качестве фона, тогда вы можете легко центрировать контент, используя 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>
...