html - 如何让这些社交图标在所有浏览器的页面上直接居中？

Question

网站链接:foxweb.marist.edu/users/kf79g/contact.php

就是这样。在部署我的网站并最终完成它之前，我必须解决的最后一步。但我不知道如何解决这个问题。在中小屏幕上，我在使用社交图标时遇到了很多麻烦。我希望中型和小型设备上的所有内容都居中并且 100% 响应。我已经尝试制作一个容器来使它们响应，但无论我做什么，它在 IE 7-10 中看起来总是很乱。随着页面宽度越来越小，图标会移动到下一行，而不是均匀地停留在一行上。我尝试调整边距，但这没有帮助，因为这破坏了整个页面的中心属性。我根本不知道该怎么做或如何解决这个问题。如果有人可以帮助我，我将不胜感激。

问题的可视化表示(IE):

http://tinypic.com/r/nla7eq/5

我希望它看起来像什么(现代浏览器):

http://tinypic.com/view.php?pic=vp9gg7&s=5

HTML:

<h2> Social networks </h2><br/>

                        <div id = "center_icons">
                            <a href="https://www.facebook.com/lenny.pfautsch" target="_blank"><img src="images/facebook.png" alt="facebook" style="margin:1px;"></a> 

                            <a href="https://plus.google.com/113122168458946246215/posts" target="_blank"><img src="images/google-plus.png" alt="google plus" style="margin:1px;"></a>

                            <a href="http://www.linkedin.com/pub/leonard-pfautsch/53/b34/1a2" target="_blank"><img src="images/linkedin.png" alt="linkedin" style="margin:1px;"></a>

                            <a href="https://github.com/LeonardPfautsch" target="_blank"><img src="images/github.png" alt="github" style="margin:1px;"></a>
                        </div>
                    <br/>

                    </div>

            </section>      


Main CSS:   

    #details_section {
        max-width:100%;
        float:left;
        margin-right:20px;
    }


Large screens:    

    #details_section {
        width:320px;
    }




Medium screens:    

    #center{
    width: 450px;
      display: block;
      margin-left: auto;
      margin-right: auto;
    }

    #center_icons{
    width: 213px; /*this value is changing for IE and chrome*/
      display: block;
      margin-left: auto;
      margin-right: auto;
    }



Small screens:    

    #center{
    width: 220px;
      display: block;
      margin-left: auto;
      margin-right: auto;
      max-width:100%;
    }

    #center_icons{
    width: 214px; /*this value is changing for IE and chrome*/
      display: block;
      margin-left: auto;
      margin-right: auto;
      max-width:100%;
    }

Answer 1

您还可以删除“=”之间的空格，并使用“代替'。

<div id = "center">
<div id='details_section'>

应该是

<div id="center">
<div id="details_section">

您还应该在某处指明图像大小。

<div id="container">
<div id="center_icons">
<a href="https://www.facebook.com/lenny.pfautsch" target="_blank"><img src="images/facebook.png" alt="facebook" width="40" height="40"></a>

<a href="https://plus.google.com/113122168458946246215/posts" target="_blank"><img src="images/google-plus.png" alt="google plus" width="40" height="40"></a>

<a href="http://www.linkedin.com/pub/leonard-pfautsch/53/b34/1a2" target="_blank"><img src="images/linkedin.png" alt="linkedin" width="40" height="40"></a>

<a href="https://github.com/LeonardPfautsch" target="_blank"><img src="images/github.png" alt="github" width="40" height="40"></a>
</div>
</div>

一个更简单的 CSS 是:

div {border: 1px red solid;padding: 5px}   /*this is only for us to see it when testing*/

#container {
        text-align:center;
    }

    #center_icons{
    width: 214px; /*this value is changing for IE and chrome*/
      display: block;
      margin-left: auto;
      margin-right: auto;
      max-width:100%;
    }

检查它在这里工作:http://codepen.io/anon/pen/mAjzo