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

【问题标题】：How to vertically center align background image with text?如何将背景图像与文本垂直居中对齐？
【发布时间】：2012-11-06 07:30:03
【问题描述】：

在没有为height 或line-height 分配常量（因此，不是自动和可重用）值的情况下，我无法将背景图像与文本垂直对齐。我想知道是否真的有一种方法可以垂直居中对齐 bg 图像，比如a element, with its text without assigning constant values toline-heightorheight`？

此处提供现场演示：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;   
}

【问题讨论】：

How to vertically center image inside div的可能重复

标签： css vertical-alignment

【解决方案1】：

尝试使用两个词将背景与 css 对齐。

background-position: left center;

参考：http://www.w3schools.com/cssref/pr_background-position.asp

更新：

从 cmets 添加另一个链接。 Grant Winney 分享了另一个网站，该网站的界面要好得多。

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

【讨论】：

【解决方案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);

});

我的回答基于以下来源How do I get background image size in jQuery?

【讨论】：

【解决方案3】：

通过使用 background css 到 center 背景图像，您将始终居中。问题是文本与控件中间的对齐方式。

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

或者，如果你不想使用em，你可以试试display:table-cell css。

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

【讨论】：