強制主DIV包含圖像DIV浮動中心

我很難迫使包含一組圖像的DIV每個都包含在DIV中，以便在我的響應元素中居中。我試圖給主DIV提供100％的寬度，並且在圖像DIV上同時使用了清晰和浮動的混合，但我似乎無法讓它們變得更好。我知道我很接近，但找不到我想念的東西。下面是我有：強制主DIV包含圖像DIV浮動中心

<footer> 
    <div id="Follow-Us"><p>Follow us on:</p></div> 

    <div id="social">   
     <!--<div id="left-social-spacer"></div>--> 
      <div id="FB"> 
       <img src="Images/FB.jpg" /> 
      </div> 
      <div id="Tweet" style="margin: 0 auto"> 
       <img src="Images/Twitter.jpg" /> 
      </div> 
      <div id="WP" style="margin: 0 auto"> 
       <img src="Images/WordPress.jpg" /> 
      </div>       
    </div><!-- end social --> 
</footer> 
<div id="safety"></div> 
</article> 

<hr /> 
<div id="Unsubscribe"><p>Not interested in email updates? <a href="mailtocontent" target="_blank">Unsubscribe here</a>. Click <a href="http://www.content.com/">here</a> to subscribe. 
<br /><br />To ensure that subscription newsletters make it to your inbox, add <a href="mailtocontent"><[email protected]></a> to your address book.</p> 

</div>

這就是它看起來像在運行時在正常和響應式設計：

這是我的控制CSS吧：

#FB 
{ 
    float: right;  
    /*position: relative;*/ 
    margin: 0 auto; 
    background-color: blue; 
} 

#Tweet 
{ 
    float: left; 
    /*position: relative;*/ 
    margin: 0 auto; 
    background-color: fuchsia; 
} 

#WP 
{ 
    float: left; 
    /*position: relative;*/ 
    margin: 0 auto; 
    background-color: hotpink; 
} 

#social div 
{     
    background-color: yellow; 
    height: 57px;  
    margin: 0 auto; 
    position: relative; 
    float: left; 
} 

#left-social-spacer 
{ 
    width:90%;  
    /*background-color: #ff0000;*/ 
    height: 37px; 
    float: left; 
    margin-left: 59px;  
} 

footer 
{ 
    /*background-color: #003E79;*/ 
    height: 37px; 
    display: block; 
} 

#Follow-Us p 
{ 
    clear: left; 
    float: left; 
    width: 100%; 
    text-align: center; 
} 

#LowNavBar p 
{ 
    clear: left; 
    float: left; 
    width: 100%; 
    text-align: center; 
} 

#Copyright p 
{ 
    clear: left; 
    float: left; 
    margin-top: -15px; 
    width: 100%; 
    text-align: center; 
} 

#safety 
{ 
    clear: both; 
    /*background-color: #ee7799;*/ 
    width: 100%; 
    /*height: 50px;*/ 
} 

.no_anchor_styles 
{ 
    text-decoration: none; 
    cursor: pointer; 
} 

#read-more 
{ 
    border-radius: 5px; 
    border: none; 
    background-color: red; 
    color: white; 
}

我在這裏想念什麼，或者我在那裏添加什麼不應該在這裏，這使我無法控制打破DIV迫使他們到達中心？

來源

2016-06-27 DesignerMind

爲什麼你使用float：left？ –

這是改變，你必須在你的代碼，使對齊footer與中心social。

#FB 
{ 
    float: left; /*Float towards left not right*/ 
    margin: 0 auto; 
    background-color: blue; 
} 

#social 
{     
    background-color: yellow; 
    height: 57px;  
    margin: 0 15px; 
    position: relative; 
    float: left; 
    width:60px; 
} 

footer 
{ 
    /*background-color: #003E79;*/ 
    height: 110px; 
    display: block; 
    width:90px; 
    margin:auto; 
}

來源

2016-06-27 06:33:22 frnt

text-align-center父母和display:inline-block的社交圖標。

例子：

.main { 
 
    text-align: center; 
 
} 
 
.in { 
 
    display: inline-block; 
 
}

<div class="main"> 
 
    <div class="in"> 
 
    <img src="http://www.w3schools.com/tags/smiley.gif" alt="Smiley face" width="42" height="42"> 
 
    </div> 
 
    <div class="in"> 
 
    <img src="http://www.w3schools.com/tags/smiley.gif" alt="Smiley face" width="42" height="42"> 
 
    </div> 
 
</div>

來源

2016-06-27 06:18:47

強制主DIV包含圖像DIV浮動中心

回答

相關問題