【发布时间】：2016-08-17 15:18:32
【问题描述】：
您好，我花了几个小时来做这件事，但是当它是桌面大小时，仍然无法将社交媒体图标与“与我们联系”文本的中心对齐。它仅在移动尺寸时对齐，我希望它们对齐以使其桌面尺寸或移动设备居中。我希望页脚的内容具有响应性。我已经使用了媒体查询，但是遇到了一个问题，所以我从一开始就重复了我的页脚，因为它在桌面大小时没有响应。请给我一些想法或建议。我是 html 和 css 的新手。
这里是桌面大小。我希望社交媒体图标与“与我们联系”文本的中心对齐。
这里是手机尺寸。它在这里很好地对齐。
更新： 这就是我想要在第一张图片中做的事情。但是我重复我的页脚，因为当我将它最小化为桌面时，它对对齐、文本、高度没有响应，这是一场灾难，所以我决定从一开始就再做一次。我之前已经使用过媒体查询，但是作为桌面，当我最小化它时它不起作用，它没有响应，但在移动大小中它可以工作。
这是我的页脚 html 代码。
<div class="content">
</div>
<footer class="footer">
<div class="container">
<div class="row">
<div class="footer-col col-sm-4">
<h4 class="connect">Connect With Us</h4>
<a href="https://twitter.com/official_gapc" target="_blank" title="Follow us on Twitter"><div class="twitter-hover social-slide"></div></a>
<a href="https://www.facebook.com/pages/Governor-Andres-Pascual-CollegeNavotas-City/344134628983014?fref=ts" target="_blank" title="Like us on Facebook"><div class="facebook-hover social-slide"></div></a>
<a href="https://www.linkedin.com/edu/governor-andres-pascual-college-in-navotas-city-39345" target="_blank" title="Join us on Linkedin"><div class="linkedin-hover social-slide"></div></a>
</div>
</div>
</div>
</div>
</footer>
这是我的 css 代码。
* {
margin: 0;
}
html, body {
height: 100%;
overflow: auto;
}
.content {
min-height: 100%;
/* equal to footer height */
margin-bottom: auto;
}
.content:after {
content: "";
display: block;
}
.footer, .content:after {
height: auto;
}
.footer {
display: block;
background-color: #a92419;
color:#fff;
font-family: Century Gothic;
width: 100%;
height: auto;
}
h4{
text-align: center;
padding-top: 20px;
}
.twitter-hover {
background-image: url('images/twitter-hover.png');
margin-left: 65px;
}
.facebook-hover {
background-image: url('images/facebook-hover.png');
margin-left: 15px;
}
.linkedin-hover {
background-image: url('images/linkedin-hover.png');
margin-left: 15px;
}
.social-slide:hover {
background-position: 0px -48px;
box-shadow: 0px 0px 4px 1px rgba(0,0,0,0.8);
}
.social-slide{
height: 35px;
width: 38px;
float:left;
-webkit-transition: all ease 0.3s;
-moz-transition: all ease 0.3s;
-o-transition: all ease 0.3s;
-ms-transition: all ease 0.3s;
transition: all ease 0.3s;
}
【问题讨论】：
-
不是这样的。我还有 2 列要放在那里。
-
我不知道如何创建 sn-p 或 jsfiddle。
-
如您所见，先生。在桌面模式下，我想将社交媒体图标与“与我们联系”文本的中心对齐。第二张图片可以很好地对齐，但在桌面模式下它不是。