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

只需在代码中使用<center> </center>代替Div id＆＃34; center＆＃34;。

Answer 2

您还可以删除“=”之间的空格，并使用“而不是”。

<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

Answer 3

您需要更改CSS属性，只需测量屏幕坐标并将其置于保证金中，或者您可以使用HTML5来解决此问题。

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

3 个答案: