Question

现在我处理的问题是图像应水平对齐以创建带引导程序的页脚。

不幸的是，合作伙伴div图像保持相当小，而后续div中的元素不是水平的，它们是以垂直方式发生的。

HTML示例： `

<footer style="">
        <div class="container">
            <div class="col-md-3 col-sm-12 col-xs-12">
                    <img src="img1.png" alt="">
            </div>

            <div class="col-md-5 col-sm-12 col-xs-12 partner">
                <p>Partner </p>
                <ul class="row">
                    <li class="col-md-3 col-sm-3 col-xs-12"><img class="img-responsive" src="img2.png" alt=""></li>
                    <li class="col-md-3 col-sm-3 col-xs-12"><img class="img-responsive position1" src="img3.png" alt=""></li>
                    <li class="col-md-3 col-sm-3 col-xs-12"><img class="img-responsive" src="img4.png" alt=""></li>
                    <li class="col-md-3 col-sm-3 col-xs-12"><img class="img-responsive position2" src="img5.png" alt=""></li>
                </ul>
            </div>
            <div class="col-md-4 col-sm-12 col-xs-12 follow" style="">
                <p>Follow Us</p>

                <ul class="row">
                    <li><a href="https://www.facebook.com/" target="_blank"><img class="img-responsive" src="facebook.png" alt="Facebook"></a></li>
                    <li><a href="https://www.instagram.com/" target="_blank"><img class="img-responsive" src="instagram.png" alt="Instagram"></a></li>
                    <li><a href="http://awebsite.com/" target="_blank"><img class="img-responsive" src="website.png" alt="Website"></a></li>
                </ul>
            </div>
        </div>
    </footer>

`

这是页脚中使用的CSS：

    footer .logo{
margin-top: 15px;
}

li{
    display:block!important;
}

footer p{
    color: #928d93;
    margin-bottom: 15px;
}

footer ul li .position1{
    margin-top: 15px;
}

footer ul li .position2{
    margin-top: 10px;
}

footer .follow ul li{
    margin-left: 15px;
}

@media only screen and (max-width : 992px){
    footer {
        text-align: center;
    }

    footer .logo{
        display: block;
        margin: 20px auto;
    }

    footer .partners{
        margin: 20px 0 40px;
    }

    footer .partners ul li{
        float: none;
        width: auto;
        vertical-align: middle;
    }
}

Answer 1

要修复垂直社交媒体图标链接，只需将col-lg-4添加到其类属性中，然后添加您希望在浏览器中受影响时应用的其他媒体屏幕， 例如： col-md-6和/或col-sm-12和/或col-xs-12

<ul class="row">
     <li><a href="https://www.facebook.com/" target="_blank"><img class="col-md-4 img-responsive" src="facebook.png" alt="Facebook"></a></li>
     <li><a href="https://www.instagram.com/" target="_blank"><img class="col-md-4 img-responsive" src="instagram.png" alt="Instagram"></a></li>
     <li><a href="http://awebsite.com/" target="_blank"><img class="col-md-4 img-responsive" src="website.png" alt="Website"></a></li>
</ul>

也许如果您为图像声明高度和宽度，它们可能符合您希望它们的显示效果。我建议在你的帖子中发布一个bootply或小提琴工作图像。这可能有助于为您的问题获得更快，更准确的答案。 Something like this?

Answer 2

要居中项目，您可以使用flexbox：

.centered {
  display: flex;
  align-items: center;
  justify-content: center;
}

合作伙伴项目之间的差距：

.partner > ul > li {
  margin: 10px;
}

关注项目之间的保证金：

footer .follow ul li {
  margin: 0 15px;
}

移动视图中的中心合作伙伴项目：

li > img {
  display: inline-block;
  margin: 0 auto;
}

此外，由于你使用了ul，默认情况下ul有padding-left: 40px和margin-top: 1em; margin-bottom: 1em;，你应该删除那些真正居中的ul / li项目：

（参考：Default CSS Values for HTML Elements）

ul {
  padding: 0;
  margin: 0;
}

footer .logo {
  margin-top: 15px;
}

li {
  display: inline-block !important;
}

footer p {
  color: #928d93;
  margin-bottom: 15px;
}

footer .follow ul li {
  margin: 0 15px;
}

@media only screen and (max-width: 992px) {
  footer {
    text-align: center;
  }
  footer .logo {
    display: block;
    margin: 20px auto;
  }
  footer .partners {
    margin: 20px 0 40px;
  }
  footer .partners ul li {
    float: none;
    width: auto;
    vertical-align: middle;
  }
}

.centered {
  display: flex;
  align-items: center;
  justify-content: center;
}

.partner > ul > li {
  margin: 10px;
}

li > img {
  display: inline-block;
  margin: 0 auto;
}

ul {
  padding: 0;
  margin: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<footer style="">
  <div class="container">
    <div class="col-md-3 col-sm-12 col-xs-12">
      <img src="http://placehold.it/200x50" alt="">
    </div>

    <div class="col-md-5 col-sm-12 col-xs-12 partner">
      <p>Partner </p>
      <ul class="row">
        <li class="col-md-3 col-sm-3 col-xs-12"><img class="img-responsive" src="http://placehold.it/350x150" alt=""></li>
        <li class="col-md-3 col-sm-3 col-xs-12"><img class="img-responsive" src="http://placehold.it/350x150" alt=""></li>
        <li class="col-md-3 col-sm-3 col-xs-12"><img class="img-responsive" src="http://placehold.it/350x150" alt=""></li>
        <li class="col-md-3 col-sm-3 col-xs-12"><img class="img-responsive" src="http://placehold.it/350x150" alt=""></li>
      </ul>
    </div>
    <div class="col-md-4 col-sm-12 col-xs-12 follow" style="">
      <p>Follow Us</p>
      <ul class="row centered">
        <li>
          <a href="https://www.facebook.com/" target="_blank"><img class="img-responsive" src="http://placehold.it/50x50" alt="Facebook"></a>
        </li>
        <li>
          <a href="https://www.instagram.com/" target="_blank"><img class="img-responsive" src="http://placehold.it/50x50" alt="Instagram"></a>
        </li>
        <li>
          <a href="http://awebsite.com/" target="_blank"><img class="img-responsive" src="http://placehold.it/50x50" alt="Website"></a>
        </li>
      </ul>
    </div>
  </div>
</footer>

Answer 3

Flexbox真的给了我所有的中心，虽然它需要4个项目只在一行。

所以只需将col调整到更大的尺寸。

在我的情景中，我不得不在合作伙伴div中留出2％的保证金。

footer .logo {
  margin-top: 15px;
}

li {
  display: inline-block !important;
}

footer p {
  color: #928d93;
  margin-bottom: 15px;
}

footer .follow ul li {
  margin: 0 15px;
}

@media only screen and (max-width: 992px) {
  footer {
    text-align: center;
  }
  footer .logo {
    display: block;
    margin: 20px auto;
  }
  footer .partners {
    margin: 20px 0 40px;
  }
  footer .partners ul li {
    float: none;
    width: auto;
    vertical-align: middle;
  }
}

.centered {
  display: flex;
  align-items: center;
  justify-content: center;
}

.partner > ul > li {
  margin: 10px;
}

li > img {
  display: inline-block;
  margin: 0 auto;
}

ul {
  padding: 0;
  margin: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<footer style="">
  <div class="container">
    <div class="col-md-2 col-sm-12 col-xs-12">
      <img src="http://placehold.it/200x50" alt="">
    </div>

    <div class="col-md-6 col-sm-12 col-xs-12 partner" style="margin-left:2%;">
      <p>Partner </p>
      <ul class="row">
        <li class="col-md-3 col-sm-3 col-xs-12"><img class="img-responsive" src="http://placehold.it/350x150" alt=""></li>
        <li class="col-md-3 col-sm-3 col-xs-12"><img class="img-responsive" src="http://placehold.it/350x150" alt=""></li>
        <li class="col-md-3 col-sm-3 col-xs-12"><img class="img-responsive" src="http://placehold.it/350x150" alt=""></li>
        <li class="col-md-3 col-sm-3 col-xs-12"><img class="img-responsive" src="http://placehold.it/350x150" alt=""></li>
      </ul>
    </div>
    <div class="col-md-4 col-sm-12 col-xs-12 follow" style="">
      <p>Follow Us</p>
      <ul class="row centered">
        <li>
          <a href="https://www.facebook.com/" target="_blank"><img class="img-responsive" src="http://placehold.it/50x50" alt="Facebook"></a>
        </li>
        <li>
          <a href="https://www.instagram.com/" target="_blank"><img class="img-responsive" src="http://placehold.it/50x50" alt="Instagram"></a>
        </li>
        <li>
          <a href="http://awebsite.com/" target="_blank"><img class="img-responsive" src="http://placehold.it/50x50" alt="Website"></a>
        </li>
      </ul>
    </div>
  </div>
</footer>

使用引导程序在页脚内水平对齐图像

3 个答案: