我在垂直对齐背景图像和文本方面遇到了问题,而不需要为
这里提供了一个实时演示:http://cssdesk.com/8Jsx2。
以下是HTML代码:
height
或line-height
分配固定(因此不是自动且可重复使用的)值。 我想知道是否有一种方法可以垂直居中对齐例如a
元素的背景图像和其文本,而不需要将常量值分配给line-height
或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;
}