css - 如何垂直居中对齐背景图像与文本？

Question

我在垂直对齐背景图像和文本时遇到了问题，没有为 height 或 line-height 分配常量(因此，不是自动和可重用的)值。我想知道是否真的有一种方法可以垂直居中对齐 a 元素 的 bg 图像及其文本，而无需为 line-height 分配常量值或高度`？

此处提供现场演示:http://cssdesk.com/8Jsx2 .

这是 HTML:

<a class="">background-position: center</a>
<a class="contain">background-size: contain</a>
<a class="line-height">Constant line-height</a>

这是 CSS:

a {
  display: block;
  margin: 10px;
  width: 200px;
  padding-left: 34px;
  font-size: 14px;  

  background: url('http://cdn1.iconfinder.com/data/icons/freeapplication/png/24x24/Thumbs%20up.png');  
  background-repeat: no-repeat;
  background-position: 5px center;

  border: 1px solid black;
}

/* I don't want to use constant line-height */
.line-height {
    line-height: 24px;
}

/* I don't want to use this, because I want my bg image's size to stay intact */
.contain {
    background-size: contain;   
}

Answer 1

尝试使用两个词来使您的背景与 css 保持一致。

background-position: left center;

引用:http://www.w3schools.com/cssref/pr_background-position.asp

更新:

从评论中添加另一个链接。 Grant Winney 分享了另一个站点，该站点具有更好的界面来说明其工作原理。

https://developer.mozilla.org/en-US/docs/Web/CSS/background-position