代码之家 › 专栏 › 技术社区 › Sébastien Gicquel

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

vertical-alignment css

-1

Sébastien Gicquel · 技术社区 · 8 年前

我用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 回复 | 直到 8 年前

Temani Afif 8 年前

使用图像作为背景,然后可以使用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>