Tengo un problema en el que simplemente no puedo hacer que mi pie de página se alinee con un texto alineado al centro de aspecto decente y contenido alineado al centro en relación con el ancho de la barra lateral.

Las imágenes de mi problema están aquí (no alineadas):

Barra lateral de ancho completo: ingrese la descripción de la imagen aquí

Barra lateral encogida: ingrese la descripción de la imagen aquí

Mi código actual es el siguiente:

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>

Cualquier ayuda sería muy apreciada.

2
Brian Ramsey 30 ene. 2016 a las 05:42

2 respuestas

La mejor respuesta
display: table;
margin: 0 auto;

Oye. Quizás esto funcione. Así se ve en mi página.

1
Paulius K. 30 ene. 2016 a las 03:21

Utilice este código y adjúntelo a la clase de la sección adecuada, como sea que se llamen. Lo más probable es que el número de ancho y el número de margen para el contenido y el pie de página estén adjuntos a un javascript que maneja la alternancia del cierre de la barra lateral. Asegúrate de que sean iguales.

#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;
}

Consulte el CODEPEN en funcionamiento

1
LOTUSMS 30 ene. 2016 a las 03:38