Question

我有一个问题，就是我无法让我的页脚排列成一个体面的中心对齐文本，以及相对于侧边栏宽度的居中对齐内容。

我的问题图片在这里（未对齐）：

侧边栏全宽：

侧边栏收缩：

我目前的代码如下：

CSS

#cl-wrapper .cl-footer {
    border-top: 1px solid #131519;
    box-shadow: 0 1px 0 #2A2C31 inset;
    height: 50px;
    display: block;
    width: 100%;
    background-color: #1F2126;
    color: #777;
    position: fixed;
    bottom: 0;
    text-align: center;
}

#cl-wrapper .cl-footer > .row {
    clear: both;
    display: inline-block;
    line-height: 19px;
    margin: auto;
    overflow: hidden;
}

HTML

<div class="container-fluid">
<footer class="cl-footer">
<div class="row">
    <?php echo (ENVIRONMENT === 'development') ? 'Page rendered in <strong>{elapsed_time}</strong> seconds. Using <strong>{memory_usage}</strong> of memory | ' . 'CodeIgniter Version <strong>' . CI_VERSION . '</strong><br />' : '' ?>Copyright &copy; <?=date('Y')?> | Eridian Pty Ltd | All Rights Reserved
</div>
</footer>
</div>

非常感谢任何帮助。

Answer 1

display: table;
margin: 0 auto;

嘿。也许这会奏效。这就是它的外观。

Answer 2

使用此代码并将其附加到正确的部分类，无论它们可能被调用。内容和页脚的宽度数和边距数很可能附加到处理侧边栏关闭的切换的javascript。确保它们是相同的。

#wrapper {
    height: auto;
    min-height: 100%;
    position: relative;
}

.page-sidebar {
    position: fixed;
    width: 210px;  /* This number  */
    position: absolute;
    height: 100%;
    left: 0;
    bottom: 0;
    top: 0;
    padding-top: 50px;
    z-index: 2;
    background:#333;
}


.page-content {
    margin-left: 210px;  /* This number  */
    min-height: 100%;
    padding-top: 50px;
    background:#999;
}

footer {
    background:#eee;
    margin-left: 210px;  /* This number  */
    padding: 15px 20px;
    border-top: 1px solid #e3e3e3;
    height: 51px;
    bottom: 0;
    left: 0;
    right: 0;
    text-align:center;
}

查看工作CODEPEN

块/内联块内的页脚水平对齐

2 个答案: