以頁腳中的圖像爲中心文字

好的，所以我一直在尋找與我相同問題的人，但沒有找到任何人（幾乎100％的人，你們中有些人會鏈接到一個）。以頁腳中的圖像爲中心文字

我已經設法將一個div放在一個div裏面，這個div又是在footer內部的（漂亮舒適的矯枉過正）。但我的問題是，我已經集中了兩行文字連接到他們的兩個圖像。我想讓文本垂直顯示（以圖像爲中心），而不是像現在一樣顯示在圖像的右下角。

漂亮舒爾它的東西簡單，但這裏是一個鏈接：

<footer> 

<div id="footer"> 
<div id="sosial"> 
<img src="bilder/telefon.jpg" style="height:50%;"> 
<a href="#"> +47 930 98 907</a> 
<img src="bilder/mail.png" style="height:50%; margin-left:20%; margin-top:20px;"> 
<a href="#"> [email protected]</a> 
</div> 
</div> 

</footer> 




*{ 
    margin: 0px; 
    padding: 0px; 
    color: #fff; 
} 

footer { 
width:100%; 
height: 80px; 
background-color: red; 
} 
#footer{ 
height: 100%; 
} 

#sosial { 
text-align: center; 
vertical-align: middle; 

} 
#sosial a{ 
list-style-type: none; 
text-decoration: none; 

}

來源

2014-09-02 Håvard Pedersen

爲了垂直對齊img元素旁邊錨設置vertical-align: middle兩個元素。

#sosial img, 
#sosial a { 
    vertical-align: middle; 
}

爲了垂直居中頁腳中的所有的含元素，可以使用table-cell/table方法。

#footer { 
    height: 100%; 
    width: 100%; 
    display: table; 
} 
#sosial { 
    text-align: center; 
    display: table-cell; 
    vertical-align: middle; 
}

Updated Exmaple

我刪除的例子中的內聯CSS樣式。您可以使用img:nth-of-type()將邊距應用於第二個元素。只是拋出選項。

#sosial img:nth-of-type(2) { 
    margin-left:50px; 
}

來源

2014-09-02 22:28:22

，如果你知道什麼是你想要的，你可以使用圖像的高度，以我的例子是50像素：

#sosial a { 
    list-style-type: none; 
    text-decoration: none; 
    line-height: 50px; 
    display: inline-block; 
    height: 100%; 
    vertical-align: middle;

}

來源

2014-09-02 22:38:48 Gmi182

以頁腳中的圖像爲中心文字

回答

相關問題