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：

<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'); }

Answer 2

如果您还使用最新的bootstrap，那么您可以使用此类

col-sm-offset-......12

你不知道你调整自己的设备大小`col-sm-offset ........ 12345到12 了解更多细节 https://getbootstrap.com/examples/grid/

Answer 3

这是小提琴 https://jsfiddle.net/brunocoder/ozgntcm2/1/

首先，您的页脚标记中有一个额外的结束div。
您需要使用bootstrap offset属性来集中列。这是链接http://getbootstrap.com/css/#grid 所以你的代码应该是这样的。

修改后的HTML

<div class="content">
</div>
   <footer class="footer">
      <div class="container">
        <div class="row">
             <div class="footer-col col-sm-4 col-md-4 col-lg-4 col-md-offset-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>
     </footer>

Answer 4

在代码的每个部分使用bootstrap，就像你在div中使用了div一样，使用bootstrap来对齐它们，就像你没有那样，它会根据屏幕大小不对齐。

   <footer class="footer">
      <div class="container">
        <div class="row">
             <div class="footer-col col-sm-4 col-md-4 col-lg-4 col-md-offset-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 col-sm-4">
                    </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 col-sm-4">
                    </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 col-sm-4">
                    </div>
                </a>
            </div>
            <div class="footer-col col-sm-4 col-md-4 col-lg-4 col-md-offset-4"></div>
            <div class="footer-col col-sm-4 col-md-4 col-lg-4 col-md-offset-4"></div>
          </div>
        </div>
     </footer>

将您想放置的任何内容放在下面的两个div中或保持不变，它是否可以帮助您制作响应式页脚。

Div对齐到中心

4 个答案: