Centrar el contenido dentro de una columna en Bootstrap 4

95

Necesito ayuda para solucionar el problema, necesito centrar el contenido dentro de la columna en bootstrap4, encuentre mi código a continuación

<div class="container">
    <div class="row justify-content-center">
        <div class="col-3">
        <div class="nauk-info-connections">
        </div>
     </div>
</div>
twitter-bootstrap flexbox bootstrap-4 Praveen Kumar
fuente
2
El uso puede usar class="text-center".
Mihai Alexandru-Ionut
Intenté usarlo pero no funciona para Bootstrap4, el texto solo se está centrando, pero necesito que el div con la clase "nauk-info-connections" esté alineado centrado dentro del div col-3.
Praveen Kumar
Usé el método tradicional de centrar el contenedor .nauk-info-connections {border-radius: 50%; borde: 1px sólido $ nauk-naranja; altura: 100px; ancho: 100px; margen: 0 automático; }
Praveen Kumar

Respuestas:

206

Hay varios métodos de centrado horizontal en Bootstrap 4 ...

  • text-centerpara display:inlineelementos centrales
  • offset-*o mx-autose puede usar para centrar la columna ( col-*)
  • o, justify-content-centeren la rowque las columnas del centro ( col-*)
  • mx-autopara centrar display:blockelementos en el interiord-flex

mx-auto(márgenes automáticos del eje x) se centrarán display:blocko display:flexelementos que tengan un ancho definido, (%, vw, px, etc.). Flexbox se utiliza de forma predeterminada en las columnas de la cuadrícula, por lo que también existen varios métodos de centrado de flexbox.

Demostración de los métodos de centrado de Bootstrap 4

En su caso, utilice mx-autopara centrar col-3y text-centerpara centrar su contenido.

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

https://codeply.com/go/GRUfnxl3Ol

o, usandojustify-content-centeren elementos flexbox (.row):

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

Ver también:
Centro de alineación vertical en Bootstrap 4

Zim
fuente
Gracias. Lo que no veo en ninguno de los ejemplos o documentos de Bootstrap es el centrado horizontal de elementos no en línea, en diferentes puntos de interrupción. Por ejemplo, centrando a <select>en md y arriba, pero alineando a la izquierda debajo de md.
KayakinKoder
Si está utilizando Bootstrap 4 select, es display: block, no display: inline porque form-controles display: block. Por supuesto, la pregunta original no se trataba de usar puntos de interrupción receptivos, por lo que no se explica en la respuesta.
Zim
12 

<div class="container">
    <div class="row">
        <div class="col d-flex justify-content-center">
             CenterContent
        </div>
    </div>
</div>
Expandir fragmento

Habilite 'flex' para la columna que deseemos y use justify-content-center

Dhinesh: Sí
fuente
esta es la única solución que funcionó para mí. ¡Uf! gracias;)
Akhil
8

Agrega clase text-centera tu columna:

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

He usado justify-content-centerclass en lugar de mx-autocomo en esta respuesta .

comprobar en https://jsfiddle.net/sarfarazk/4fsp4ywh/

Sarfaraz Kasmani
fuente
2
Esto ya está cubierto en la respuesta más votada
Jean-François Corbett
@ Jean-François Corbett He usado la clase justify-content-center en lugar de mx-auto. Este también es un método para hacerlo. La gente puede usar esto también. Solo estoy tratando de ayudar a otros. Gracias
Sarfaraz Kasmani
Ah bien. Bueno, un poco de explicación puede ayudar mucho.
Jean-François Corbett
1 

.row>.col, .row>[class^=col-] {
    padding-top: .75rem;
    padding-bottom: .75rem;
    background-color: rgba(86,61,124,.15);
    border: 1px solid rgba(86,61,124,.2);
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row justify-content-md-center">
    <div class="col col-lg-2">
      1 of 3
    </div>
    <div class="col col-lg-2">
      1 of 2
    </div>
    <div class="col col-lg-2">
      3 of 3
    </div>
  </div>
</div>
Expandir fragmento

Abdo-Host
fuente
1

2020: problema similar

Si su contenido es un conjunto de botones que desea centrar en una página, envuélvalos en una fila y use justify-content-center.

Código de muestra a continuación:

<div class="row justify-content-center">

    <button>Action A</button>
    <button>Action B</button>
    <button>Action C</button> 

</div>
MarcoZen
fuente