1

Estoy tratando de centrar esto pero no lo logro, está en una versión antigua de bootstrap (v3.3.6) y no la puedo actualizar porque se rompe todo el template si lo hago, el código es el siguiente

<div class="normal-table-area">
        <div class="container">
            <div class="row">

                <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 pd-x-auto">
                    <div class="normal-table-list">
                        <div class="basic-tb-hd">
                            <img src="{{ asset('img/profile.jpg') }}" alt="Foto de perfil" class="img-thumbnail">
                        </div>
                        <div class="bsc-tbl">
                            <table class="table table-bordered">
                                <tbody>
                                    <tr>
                                        <td><b>Apellidos:</b></td>
                                        <td>Alexandra</td>
                                    </tr>
                                    <tr>
                                        <td><b>Nombres:</b></td>
                                        <td>Madeleine</td>
                                    </tr>
                                    <tr>
                                        <td><b>Sexo:</b></td>
                                        <td>Sebastian</td>
                                    </tr>
                                    <tr>
                                        <td><b>Nivel:</b></td>
                                        <td>Elizabeth</td>
                                    </tr>
                                    <tr>
                                        <td><b>Sección:</b></td>
                                        <td>Elizabeth</td>
                                    </tr>
                                    <tr>
                                        <td><b>Correo de verificación:</b></td>
                                        <td>Benjamin</td>
                                    </tr>
                                    <tr>
                                        <td><b>Correo estudiantil:</b></td>
                                        <td>Katherine</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

Como ven está en un patrón de 6 columnas, lo que quisiera es lograr que se centre dejando 3 columnas a los lados y centrar esa imagen dentro del div que se encuentra, porque está pegada a la derecha, ya he tratado de poner margins y paddings en auto pero no funciona. No soy bueno manejando CSS por lo que no sé que otra cosa intentar a parte de eso.

Así se encuentra actualmente

4
  • ¿Qué versión de Bootstrap estás usando?
    – Alvaro Montoro
    el 11 jun. 2019 a las 1:33
  • @AlvaroMontoro es el template Notika, está usando Bootstrap v3.3.6
    – eriandev
    el 11 jun. 2019 a las 1:47
  • Tenés que usar Offseting columns. Agregá col-xs-offset-3 a la lista de clases de columnas. Con eso vas a mover todo 3 columnas para la derecha.
    – azeós
    el 11 jun. 2019 a las 2:00
  • Magnífico, ¡muchas gracias!
    – eriandev
    el 11 jun. 2019 a las 3:01

1 respuesta 1

1

Lo primero es agregar la clase col-xs-offset-3 al listado de columnas. Con eso lográs empujar todo 3 columnas para la derecha (offseting columns).

Para centrar la imagen tenés que usar la clase center-block (center content).

<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="normal-table-area">
    <div class="container">
        <div class="row">

            <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 pd-x-auto col-xs-offset-3">
                <div class="normal-table-list">
                    <div class="basic-tb-hd">
                        <img src="https://randomuser.me/api/portraits/lego/2.jpg" alt="Foto de perfil" class="img-thumbnail center-block" width="64">
                    </div>
                    <div class="bsc-tbl">
                        <table class="table table-bordered">
                            <tbody>
                                <tr>
                                    <td><b>Apellidos:</b></td>
                                    <td>Alexandra</td>
                                </tr>
                                <tr>
                                    <td><b>Nombres:</b></td>
                                    <td>Madeleine</td>
                                </tr>
                                <tr>
                                    <td><b>Sexo:</b></td>
                                    <td>Sebastian</td>
                                </tr>
                                <tr>
                                    <td><b>Nivel:</b></td>
                                    <td>Elizabeth</td>
                                </tr>
                                <tr>
                                    <td><b>Sección:</b></td>
                                    <td>Elizabeth</td>
                                </tr>
                                <tr>
                                    <td><b>Correo de verificación:</b></td>
                                    <td>Benjamin</td>
                                </tr>
                                <tr>
                                    <td><b>Correo estudiantil:</b></td>
                                    <td>Katherine</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.