画像のDIVを含むMain DIVをFloat Centerに置き換えます

Question

DIVで囲まれた画像のグループを含むDIVを、応答要素内の中央に配置することは困難です。私は、メインのDIVに100％の幅を提供しようとしましたが、イメージ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"><!--info@content.com--></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; 
} 

私はここで何が欠けているのですか、それとも私がそこにいるべきではないことは、私をcontrから守っているはずですDIVを中心に動かすためにDIVを鞭打っていますか？

Answer 1

これは変更されている、あなたは中央にsocialでfooterを揃えるために、あなたのコードで行う必要があります。

#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; 
} 

Answer 2

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>