垂直中心鏈接圖像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

回答

相關問題