我在这里阅读了很多文章,很多帖子,但不幸的是,我不能将2行文字和图像垂直居中。
<a class="button" href="">
<img src="http://dummyimage.com/30x30/cf97cf/fff">
Button
<span>Button alt</span>
</a>
我想要图片旁边的2行(居中),并将整个内容垂直居中于.button
。
body {
padding: 20px;
}
.button {
background: #000;
color: #fff;
text-decoration: none;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
height: 120px;
padding: 30px 50px;
display: inline-block;
}
span {
font-size: 11px;
color: #ccc;
display: block;
}
img {
vertical-align: middle;
}
在CSS-Tricks中,我发现了一篇文章,但我不想使用position:absolute
来集中精力。是否有任何干净的方法将文本/图像置于<a>
?
JsFiddle:http://jsfiddle.net/7fx3eozd/
答案 0 :(得分:3)
您可以将 display:table-cell;
添加到包含课程display: table-cell
和.button
的元素中:
vertical-align: middle
&#13;
body {
padding: 20px;
}
.button {
background: #000;
color: #fff;
text-decoration: none;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
height: 120px;
padding: 30px 50px;
display: table-cell;/*change display to table-cell*/
vertical-align: middle;/*add vertical align middle*/
}
span {
font-size: 11px;
color: #ccc;
display: block;
}
img {
vertical-align: middle;
}
&#13;
答案 1 :(得分:2)
您还可以将text
和span
包裹在div
内,然后将div
和img
包裹在另一个div
中,然后添加这些类:
还在display: inline-block;
img
.center {
position: relative;
top: 50%;
transform: translateY(-50%);
}
.btnText {
vertical-align: middle;
display: inline-block;
}
body {
padding: 20px;
}
.button {
background: #000;
color: #fff;
text-decoration: none;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
height: 120px;
padding: 30px 50px;
display: inline-block;
}
span {
font-size: 11px;
color: #ccc;;
display: block;
}
img {
vertical-align: middle;
display: inline-block;
}
.center {
position: relative;
top: 50%;
transform: translateY(-50%);
}
.btnText {
vertical-align: middle;
display: inline-block;
}
<a class="button" href="">
<div class="center">
<img src="http://dummyimage.com/30x30/cf97cf/fff">
<div class="btnText">
Button
<span>Button alt</span>
</div>
</div>
</a>
答案 2 :(得分:0)
您可以将img
和span
打包到div
(带课程中心)
<a class="button" href="">
<div class="center">
<img src="http://dummyimage.com/30x30/cf97cf/fff">
Button
<span>Button alt</span>
</div>
</a>
然后添加此css:
.center {
position: relative;
top: 50%;
transform: translateY(-50%);
}
解释:将div
的位置设置为顶部50%
,然后将其移至顶部,其高度为50%(translateY -50%)