CSS：allign img相對於div

我對HTML和CSS比較陌生，我試圖格式化一個網頁。
我想將四個圖像對齊到input div。您可以看到頁面here，這四個社交媒體圖標。我希望他們一個接一個地排成一排，與上面的搜索欄對齊。那麼就像網頁左側的中心一樣？CSS：allign img相對於div

下面是4個圖像HTML：

<div class="social-icons group"> 
    <a href="https://www.facebook.com/asbreckenridge" title="" target="_blank"><img src="http://www.iconsdb.com/icons/download/gray/facebook-24.jpg"></a> 
    <a href="http://twitter.com/{text:Twitter Username}" title="" target="_blank"><img src="http://www.iconsdb.com/icons/download/gray/twitter-24.jpg"></a> 
    <a href="https://github.com/AndrewSB" title="" target="_blank"><img src="http://www.iconsdb.com/icons/download/gray/github-6-24.jpg"></a> 
    <a href="mailto:[email protected]?Subject=Contact%From%Blog"><img src="http://www.iconsdb.com/icons/download/gray/new-post-16.jpg"></a> 
</div>`

和CSS

body header .social-icons{font-size:20px;float:center;list-style:none;display:block;margin:0 5px 15px;width:24px;} 
body header .social-icons a {color:#4f555b;display:block;opacity:0.8;text-decoration:none}

來源

2014-01-19 AndrewSB

請讓一個JSFiddle –

我會做一個，然後編輯它到問題中。幾分鐘 – AndrewSB

發表評論，讓我收到通知。 –

好像你想要的以下內容：

元素.social-icons不再浮動，並寬度更改爲100%以允許兒童元素的水平空間。孩子a元素從display:block更改爲display:inline-block。

body header .social-icons { 
    display: block; 
    width: 100%; 
    text-align: center; 
} 

body header .social-icons a { 
    color: #4f555b; 
    opacity: 0.8; 
    text-align: center; 
    text-decoration: none; 
    display: inline-block; 
}

來源

2014-01-19 05:06:46

儘量將它們設置爲與文本對齊中心UL：

http://jsfiddle.net/Kiaaanabal/sSXDC/

ul.social-media li { 
    display: inline-block; 
    text-align: center; 
}

您也可以同時設置輸入和UL的寬度是相同的，所以他們匹配。希望這可以幫助！

來源

2014-01-19 05:12:56 kiaaanabal

CSS：allign img相對於div

回答

相關問題