Question

我很难强迫DIV包含一组图像，每个图像都包含在DIV中，以便在我的响应元素中居中。我试图为主DIV提供100％的宽度，并在图像DIV上同时使用clear和float的混合，但我似乎无法让它们完全让步。我知道我很亲密，但找不到我所缺少的东西。这就是我所拥有的：

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

我在这里错过了什么，或者我添加的是什么，不应该在这里阻止我控制DIV强迫他们到中心？

Answer 1

public static int DoStuff(int num1,int num2)父母和text-align-center社交图标。

示例：

display:inline-block

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

Answer 2

这是更改，您必须在代码中将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;
}

强制包含图像DIV的主DIV浮动中心

2 个答案: