CSS 如何将背景图像与文本垂直居中对齐？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13435803/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to vertically center align background image with text?
提问by TheFooProgrammer
I am having trouble vertically aligning background image with text, without assigning constant (and hence, not automatic and reusable) values to heightor line-height. I was wondering if there actually is a way to vertically center align bg image of, say and aelement, with its text without assigning constant values toline-heightorheight`?
我在将背景图像与文本垂直对齐时遇到了问题，没有将常量（因此，不是自动和可重用的）值分配给heightor line-height。我想知道是否真的有一种方法可以垂直居中对齐 bg 图像，比如a元素, with its text without assigning constant values to行高高度or？
A live demo is available here: http://cssdesk.com/8Jsx2.
现场演示可在此处获得：http: //cssdesk.com/8Jsx2。
Here's the HTML:
这是 HTML：
<a class="">background-position: center</a>
<a class="contain">background-size: contain</a>
<a class="line-height">Constant line-height</a>
And here's the CSS:
这是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;
}
回答by JabberwockyDecompiler
Try using two words to align your background with css.
尝试使用两个词将您的背景与 css 对齐。
background-position: left center;
Reference: http://www.w3schools.com/cssref/pr_background-position.asp
参考：http: //www.w3schools.com/cssref/pr_background-position.asp
UPDATE:
更新：
Adding another link from comments. Grant Winney shared another site that has a much better interface for how this works.
从评论中添加另一个链接。Grant Winney 分享了另一个站点，该站点具有更好的界面来说明其工作原理。
https://developer.mozilla.org/en-US/docs/Web/CSS/background-position
https://developer.mozilla.org/en-US/docs/Web/CSS/background-position
回答by littledynamo
I don't think this is possible with CSS alone because background images don't affect the height of their containing element. You would need to detect the size of the background image and that would require javascript. Detecting the width and height of an element in Javascript involves creating an imgfrom the background image.
我认为仅使用 CSS 是不可能的，因为背景图像不会影响其包含元素的高度。您需要检测背景图像的大小，这将需要 javascript。在 Javascript 中检测元素的宽度和高度涉及img从背景图像创建一个。
Here is a solution that uses Javascript and display: tableto achieve the desired result:
这是一个使用 Javascript 并display: table达到预期结果的解决方案：
Working example: http://jsbin.com/olozu/9/edit
工作示例：http: //jsbin.com/olozu/9/edit
CSS:
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:
HTML：
<div><
<a id="example-a">background-position: center</a>
</div>
JS:
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);
});
I based my answer on the following source How do I get background image size in jQuery?
我的回答基于以下来源如何在 jQuery 中获取背景图像大小？
回答by Kami
By using the backgroundcss to centerthe background image you will have it always centred. The issue is the alignment of the text to the middle of the control.
通过将backgroundcss 用于center背景图像，您将始终将其居中。问题是文本与控件中间的对齐方式。
Have you considered using the emunits to specify line height? You will need to specify some kind of height to allow the vertical centre to take place.
您是否考虑过使用em单位来指定行高？您需要指定某种高度以允许垂直中心发生。
Alternatively, if you do not want to use em, you can try display:table-cellcss.
或者，如果您不想使用em，可以尝试使用display:table-cellcss。
Check - http://cssdesk.com/3ZXrH- for the above two examples. I have added height:10em;to better demonstrate what is going on.
检查 - http://cssdesk.com/3ZXrH- 上述两个示例。我已添加height:10em;以更好地演示正在发生的事情。
