Necesito ayuda para solucionar el problema, tengo que centrar el contenido en el interior de la columna en bootstrap4, por favor, encontrar mi código de abajo

<div class="container">
    <div class="row justify-content-center">
        <div class="col-3">
        <div class="nauk-info-connections">
        </div>
     </div>
</div>
  • Podemos usar class="text-center".
  • Traté de usarlo, pero no es trabajo para Bootstrap4, el texto solo es llegar centrado, pero tengo el div con la clase «nauk-info-conexiones» en sí mismo para estar centrado alineado dentro de la col-3 div.
  • He utilizado el método tradicional de centrar el contenedor .nauk-info-conexiones{ border-radius:50%; border:1px solid $nauk-naranja; height: 100px; width: 100px; margin: 0 auto; }

3 Comentarios

  1. 128

    Hay varios centrado horizontal de los métodos de Bootstrap 4

    • text-center para el centro de la display:inline elementos
    • offset-* o mx-auto puede ser utilizado para centro de la columna (col-*)
    • o, justify-content-center en el row a centro columnas (col-*)
    • mx-auto para el centrado display:block elementos dentro de d-flex

    mx-auto (auto eje x márgenes), el centro de display:block o display:flex los elementos que tienen un ancho definido, (%, vw, px, etc..). Flexbox es utilizado por defecto en las columnas de la cuadrícula, por lo que también hay varios flexbox centrado métodos.

    Demostración de la secuencia de arranque 4 Centrado Métodos

    En su caso, utilizar las mx-auto el centro de la col-3 y text-center hacia el centro del contenido..

    <div class="row">
        <div class="col-3 mx-auto">
            <div class="text-center">
                center
            </div>
        </div>
    </div>

    http://www.codeply.com/go/GRUfnxl3Ol

    o, utilizando justify-content-center en flexbox elementos (.row):

    <div class="container">
        <div class="row justify-content-center">
            <div class="col-3 text-center">
                center
            </div>
        </div>
    </div>

    Véase también:

    Vertical Align Center en Bootstrap 4

  2. 4

    Agregar clase text-center a su columna:

    <div class="col text-center">
    I am centered
    </div>
  3. 3
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-3 text-center">
                Center text goes here
            </div>
        </div>
    </div>

    He utilizado justify-content-center clase en lugar de mx-auto como en esta respuesta.

    de verificación en https://jsfiddle.net/sarfarazk/4fsp4ywh/

    • Este es cubierto ya en el top-votaron a favor responder
    • Corbett he utilizado justificar-contenido-centro de clase en lugar de mx-auto. Este es también un método de hacerlo. La gente puede utilizar este también estoy tratando de ayudar a otros. Gracias
    • Ah, a la derecha. Bueno, un poco de explicación puede ir una manera larga.
    • Corbett gracias por la revisión:)

Dejar respuesta

Please enter your comment!
Please enter your name here