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

Question

我无法垂直对准文本的背景图像,而不会分配常数(因此,不自动和可重复使用)值height或line-height.我想知道是否有一种方法可以垂直居中对齐bg图像,例如和a元素, with its text without assigning constant values to线高度or`？

现场演示如下: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

Answer 2

通过对背景图像使用backgroundcss，center您将使其始终居中。问题在于文本与控件中间的对齐方式。

您是否考虑过使用em单位来指定行高？您将需要指定某种高度以允许垂直居中。

或者，如果您不想使用em，您可以尝试display:table-cellcss。

检查 - http://cssdesk.com/3ZXrH - 以上两个示例。我添加了这些内容height:10em;是为了更好地演示正在发生的事情。