如何在背景div baloon图像中居中文本？

Question

我在如何将div中的文本居中与背景图像有困难。这是我的小提琴

http://jsfiddle.net/VnqeY/12/

谢谢。

Answer 1

jsFiddle

只需声明line-height并将<a>设为vertical-align: middle

.balloon{
    background:url('http://i.imgur.com/B19Zb.jpg');
    background-repeat: no-repeat;
    text-align: center;
    color:#fff;
    font-size:1.1em;
    height:140px;
    width:140px;
    line-height: 118px;  
}
.balloon a{
    vertical-align: middle;
    color:yellow;
    text-align:center
}

<div class="balloon">
    <a href="#">Advertise with us</a>
</div>

Answer 2

display: table-cell;
text-align: center;
vertical-align: middle;

一个选项是display:table-cell但是图像和大小以及此类需求已得到修复。

Answer 3

http://jsfiddle.net/VnqeY/16/

阅读CSS相对定位。