网站链接:foxweb.marist.edu/users/kf79g/contact.php
就是这样。在部署我的网站并最终完成之前,我必须修复的最后一步。但我不知道如何解决这个问题。在中小屏幕上,我的社交图标遇到了很多麻烦。我希望中小型设备上的所有东西都集中在一起并且100%响应。我已经尝试制作一个容器来使它们响应,但无论我做什么,它在IE 7-10中总是看起来很乱。随着页面宽度越来越小,图标将移动到下一行,而不是均匀地停留在一行上。我尝试调整边距,但这没有任何帮助,因为这破坏了整个页面的中心属性。我根本不知道该怎么做或如何解决这个问题。如果有人可以帮助我,我会非常感激。
问题的可视化表示(IE):
我希望它看起来像(现代浏览器):
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%;
}
答案 0 :(得分:-1)
只需在代码中使用<center> </center>
代替Div id&#34; center&#34;。
答案 1 :(得分:-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
答案 2 :(得分:-1)
您需要更改CSS属性,只需测量屏幕坐标并将其置于保证金中,或者您可以使用HTML5来解决此问题。