Question

我似乎无法在这个页脚的右侧放置文字：

基本上发生的事情是我需要＆＃34;中心＆＃34; class保持文本在页脚上垂直对齐，但使用＆＃34; center＆＃34;课程和＆＃34;文本权利＆＃34; class（在bootstrap中）将文本弄乱。如果我只使用＆＃34; text-right＆＃34;上课时，文字在右边，但最重要的是。

.center的CSS是：

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

Answer 1

方法一 - 引导方法(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的高度 - 在这种情况下，{ {1}}。您还必须将100px换成text-right / pull-right。

方法四 - 使用您的自定义pull-left课程(example)：

center

修改HTML：

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

Answer 2

您是否正在使用flex布局，那么这将是完美的方法和最简单的方法

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

关于居中文本的真棒阅读：https://webdesign.tutsplus.com/tutorials/how-to-create-perfectly-centered-text-with-flexbox--cms-27989

使用引导程序时，CSS页脚定位到垂直居中文本

2 个答案: