在div中垂直居中鏈接圖像

Question

嗨，我正在創建一個div，其中包含一個左跨度和一個右圖像。 兩者都應居中。 我在文本上使用了行高，但是在img上似乎不起作用。 我如何居中？

 .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> 

Answer 1

由於您已經將<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>