html - Div居中对齐

Question

你好，我花了几个小时来做​​这件事，但当它处于桌面大小时，仍然无法将社交媒体图标与文本“联系我们”的中心对齐。它仅在移动尺寸时对齐我希望它们对齐到其桌面尺寸或移动尺寸的中心。我希望页脚的内容具有响应性。我已经使用了媒体查询，但我遇到了一个问题，所以我从一开始就重复了我的页脚，因为它在桌面尺寸时没有响应。请给我一些想法或建议。我是 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;
   }

Answer 1

更新:完全重写了我的答案。

当您希望内容居中时，不应使用 float:left。

<div class="footer-col col-sm-4">
   <h4 class="connect">Connect With Us</h4>
   <ul>
     <li><a href="#"><span class="twitter-hover social-slide"></span></a></li>
     <li><a href="#"><span class="facebook-hover social-slide"></span></a></li>
     <li><a href="#"><span class="linkedin-hover social-slide"></span></a></li>
   </ul>
</div>

CSS:

.footer-col h4 {
  text-align: center;
}

.footer-col ul {
  list-style: none;
  text-align: center;
}

.footer-col li {
  display: inline;
}

.social-slide {
  display: inline-block;
  height: 35px;
  width: 38px;
  line-height: 35px;
  margin-left: 15px;
  /* don't use float: left! */
}

.social-slide:first-child {
  margin-left: 0;
}

.twitter-hover  { background-image: url('images/twitter-hover.png'); }
.facebook-hover { background-image: url('images/facebook-hover.png'); }
.linkedin-hover { background-image: url('images/linkedin-hover.png'); }