如何垂直居中对齐背景图片文字？(How to vertically center align bac

我无法垂直对准文本的背景图像，不分配常数（因此，不自动和可重复使用）值到height或line-height 。我不知道是否有其实是一个办法，比方说垂直居中对齐背景图片和a元, with its text without assigning constant values to行高or 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

更新：

添加从注释的另一环节。格兰特Winney一致认为有是如何工作的一个更好的界面另一个站点。

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

Answer 2:

我不认为这是可能的单独CSS，因为背景图像并不影响其包含的元素的高度。您将需要检测的背景图像的大小和需要的JavaScript。检测元件的在Javascript的宽度和高度涉及到创建一个img从背景图像。

下面是一个使用Javascript和的溶液display: table ，以实现所期望的结果：

工作示例： http://jsbin.com/olozu/9/edit

CSS：

div {
    display: table; 
}

a {
    display: table-cell;
    vertical-align: middle;
    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: 0 0;
    border: 1px solid black;
}

HTML：

<div><
    <a id="example-a">background-position: center</a>
</div>

JS：

$(function() {

    var imageSrc = $('#example-a')
                 .css('background-image')
                   .replace('url(', '')
                      .replace(')', '')
                      .replace("'", '')
                      .replace('"', '');   

    var image = '<img style="display: none;" src="' + imageSrc + ' />';

    $('div').append(image);

    var width = $('img').width(),
        height = $('img').height(); 

    // Set the height of the containing div to the height of the background image
    $('#example-a').height(height);

});

我根据我的下面源的答案如何在jQuery中获取背景图片的大小？