强制主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浮动中心

回答

相关问题