使用 bootstrap 时 CSS 页脚定位为垂直居中文本

Question

我似乎无法将文本放置在此页脚的右侧:

FIDDLE

基本上发生的事情是我需要“center”类来保持文本在页脚上垂直对齐，但是使用“center”类和“text-right”类(在 Bootstrap 中)会使文本困惑.如果我只使用“text-right”类，文本在右边，但在最上面。

.center 的 CSS 是:

.center {
  margin: 0;
  position: absolute;           
  top: 50%;                      
  transform: translate(0, -50%);
}

Answer 1

方法一 - Bootstrap 方法 (example) :

修改后的 HTML:

<footer>
    <div class="container-fluid">
        <div class="row center">
            <p class="col-xs-9">...</p>
            <div class="col-xs-3 text-right">
                <a href="index.html">...</a>
            </div>
        </div>
    </div>
</footer>

基本上，只需添加 container/row 元素并使用列。将您的自定义 center 类添加到 row 元素。

---

方法二 (example) :

设置footer元素的显示为table，然后设置子元素的display为table-cell 并使用 vertical-align: middle 进行垂直居中。

footer {
    background: #ECECEC;
    width: 100%;
    height: 100px;
    position: absolute;
    bottom: 0;
    left: 0;
    display:table;
}
footer > p,
footer > div {
    display:table-cell;
    vertical-align:middle;
    padding:20px;
}

---

方法三(example) :

由于 footer 的高度是固定的，一个可以说是 hackish 的解决方案是设置一个 line-height 的值等于 footer 的高度 - 在本例中为 100px。您还必须将 text-right 换成 pull-right/pull-left。

---

方法四 - 使用自定义 center 类 (example) :

.center {
    margin: 0;
    position: absolute;
    top: 50%;
    transform: translate(0, -50%);
    width:100%;
}

修改后的 HTML:

<p class="text-left center">...</p>
<div class="text-right center"> <a href="index.html">...</a>