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