Question

我现在已经被困在一个非常简单的事情上一天了，我不得不寻求帮助。我试图做一些简单的事情，将我的社交媒体图标垂直居中放在我的页脚中。当有人帮助我使用导航栏时，我尝试采用相同的路线，但我似乎无法掌握/理解某些东西以获得相同的结果。

我考虑过填充，但我不确定是否仍然需要重新调整大小或更小的屏幕，所以我想采用更多的百分比路线而不是平坦的数量。

页脚HTML：

<!-- Social Media + Footer -->
<div class="container">
    <div class="navbar navbar-fixed-bottom">
        <div class="collapse navbar-collapse">            
            <div class="row">
                <div class="col-md-12">
                    <ul class="nav navbar-nav">
                        <li>
                            <img src="link/ico-facebook.png"
                                 alt="Facebook Icon"
                                 style="width: 100%; height: auto; max-width: 32px">
                        </li>
                        <li>
                            <img src="link/ico-twitter.png"
                                 alt="Twitter Icon"
                                 style="width: 100%; height: auto; max-width: 32px">
                        </li>
                    </ul>
                </div>
            </div>
        </div>            
    </div>
</div>
<!-- End of Social Media + Footer -->

CSS：

.container {
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}

.navbar-fixed-bottom {
    bottom: 0;
    margin-bottom: 0;
    border-width: 0 0 0;
    position: relative;
    right: 0;
    left: 0;
    z-index: 1030;
    -webkit-transform: translate3d(0,0,0);
    -o-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}

.navbar {
    position: relative;
    min-height: 100px;
    margin-bottom: 20px;
    border: 1px solid transparent;
}

.navbar-collapse.collapse {
    display: block!important;
    height: auto!important;
    padding-bottom: 0;
    overflow: visible!important;
}

@media (min-width: 768px) .navbar-collapse {
    width: auto;
    border-top: 0;
    -webkit-box-shadow: none;
    box-shadow: none;
}

.navbar-collapse {
    text-align: center;
    padding-right: 15px;
    padding-left: 15px;
    overflow-x: visible;
    -webkit-overflow-scrolling: touch;
    border-top: 1px solid transparent;
    -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.1);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.1);
}

.collapse {
    display: none;
}

@media (min-width: 768px).navbar-nav {
    display: inline-block;
    float: none;
    vertical-align: middle;
    margin: 0;
}

.navbar-nav {
    margin: 7.5px -15px;
    text-align: center;
}

.nav {
    padding-left: 0;
    margin-bottom: 0;
    list-style: none;
}

@media (min-width: 768px).navbar-nav>li {
    display: inline-block!important;
}

.nav>li {
    position: relative;
    display: inline-block!important;
}

img.element.style {
    width: 100%;
    height: auto;
    max-width: 32px;
}

img {
    vertical-align: middle;
}

Answer 1

您可以通过将一些自定义CSS应用于HTML元素来实现：

<div class="navbar navbar-fixed-bottom" style="display: table !important; width: 100%;">
  <div class="collapse navbar-collapse" style="vertical-align: middle;display: table-cell !important;">
  ......
  ......
  </div>
</div>

Answer 2

我是那个第一次回答你的人，所以我再来一次，以确保你理解它是如何运作的。

首先，让我们对您的HTML标记进行微小的更改，如下所示：

<!-- Social Media + Footer -->
<div class="container">
    <div class="navbar navbar-fixed-bottom">
        <div class="collapse navbar-collapse vertimid">            
            <div class="row">
                <div class="col-md-12">
                    <ul class="nav navbar-nav">
                        <li>
                            <img src="link/ico-facebook.png"
                                 alt="Facebook Icon"
                                 style="width: 100%; height: auto; max-width: 32px">
                        </li>
                        <li>
                            <img src="link/ico-twitter.png"
                                 alt="Twitter Icon"
                                 style="width: 100%; height: auto; max-width: 32px">
                        </li>
                    </ul>
                </div>
            </div>
        </div>            
    </div>
</div>
<!-- End of Social Media + Footer -->

如果您注意，我只将课程.vertimid添加到

行

<div class="collapse navbar-collapse">

我们这样做是为了准确地定位该课程，以便您可以在以后重新使用它，就像我前几天告诉你的那样。

现在，您将此属性添加到

.navbar-collapse.vertimid{display:inline-block} /* replaces display:table */

就是这样。

请记住：您需要相对于容器块垂直对齐元素。此外，正如我们所做的那样，请务必在Firefox中检查您的网站，因为您会发现您的社交媒体图标不存在

Answer 3

决定你想要社交媒体图标的页脚高度百分比......假设30％：

ul.nav {
    height:30%;
    margin-top:35%;
    margin-bottom:35%;    
}

需要帮助将社交媒体图标集中在网站的页脚中

3 个答案: