垂直中心链接图像div

嗨，我创建一个包含左跨度和右图像的股利。两者都应该居中。我在文本上使用了行高，但这似乎不适用于img。我怎样才能居中呢？垂直中心链接图像div

.stat-row1 { 
 
    border: 1px solid; 
 
    height: 40px; 
 
} 
 

 
.stat-row1 span { 
 
    line-height: 40px; 
 
}

<div class="stat-row1"><span>1.70</span><span style="float: right; "><a href="https://danskespil.dk/oddset/"><img border="0" style="float: right; height: 30px;" alt="Oddset" src="http://www.ggwp.dk/wp-content/uploads/2015/02/oddset.png"></a></span></div>

来源

2015-02-11 Peter Pik

你指的是垂直或水平居中？ – showdev 2015-02-12 00:10:31

垂直对齐 – 2015-02-12 00:33:41

既然你已经浮在<span>向右，你并不需要浮动图像本身。由于您已设置line-height，因此您可以在图像上使用vertical-align:middle。

.stat-row1 { 
 
    border: 1px solid; 
 
    height: 40px; 
 
} 
 
.stat-row1 span { 
 
    line-height: 40px; 
 
} 
 
.stat-row1 span.image { 
 
    float: right 
 
} 
 
.stat-row1 span.image img { 
 
    vertical-align: middle; 
 
    height: 30px; 
 
}

<div class="stat-row1"> 
 
    <span>1.70</span> 
 
    <span class="image"> 
 
    <a href="https://danskespil.dk/oddset/"> 
 
     <img border="0" alt="Oddset" src="http://www.ggwp.dk/wp-content/uploads/2015/02/oddset.png"> 
 
    </a> 
 
    </span> 
 
</div>

来源

2015-02-12 00:01:45 showdev

垂直中心链接图像div

回答

相关问题