Centralize o conteúdo dentro de uma coluna no Bootstrap 4

98

Preciso de ajuda para resolver o problema, preciso centralizar o conteúdo dentro da coluna no bootstrap4, encontre meu código abaixo

<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
fonte
3
Use pode usar class="text-center".
Mihai Alexandru-Ionut
Tentei usá-lo, mas não está funcionando para o Bootstrap4, o texto sozinho está ficando centralizado, mas preciso que a própria div com a classe "nauk-info-connections" seja centralizada e alinhada dentro da div col-3.
Praveen Kumar
Usei o método tradicional de centralizar o contêiner .nauk-info-connections {border-radius: 50%; borda: 1px sólido $ nauk-orange; altura: 100px; largura: 100px; margem: 0 automático; }
Praveen Kumar

Respostas:

212

Existem vários métodos de centralização horizontal no Bootstrap 4 ...

  • text-centerpara display:inlineelementos centrais
  • offset-*ou mx-autopode ser usado para centralizar a coluna ( col-*)
  • ou, justify-content-centerno rowpara colunas centrais ( col-*)
  • mx-autopara centrar os display:blockelementos dentrod-flex

mx-auto(margens automáticas do eixo x) irá centralizar display:blockou display:flexelementos que têm uma largura definida, (%, vw, px, etc.). O Flexbox é usado por padrão em colunas de grade, então também existem vários métodos de centralização do flexbox.

Demonstração dos métodos de centralização do Bootstrap 4

No seu caso, use mx-autopara centralizar col-3e text-centerpara centralizar seu conteúdo.

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

https://codeply.com/go/GRUfnxl3Ol

ou, usandojustify-content-centerem elementos flexbox (.row):

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

Veja também:
Centro de alinhamento vertical no Bootstrap 4

Zim
fonte
Obrigado. O que não vejo em nenhum dos exemplos ou documentos do Bootstrap é a centralização horizontal de elementos não inline, em pontos de interrupção diferentes. Por exemplo, centralizando a <select>em md e acima, mas alinhando à esquerda abaixo de md.
KayakinKoder
Se você estiver usando o Bootstrap 4 select, é display: block, não display: inline porque form-controlé display: block. É claro que a pergunta original não era sobre o uso de pontos de interrupção responsivos, então isso não é explicado na resposta.
Zim
13 

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

Habilite 'flex' para a coluna como queremos e use justify-content-center

Dhinesh Sim
fonte
esta é a única solução que funcionou para mim. ufa! obrigado;)
Akhil
8

Adicione classe text-centerà sua coluna:

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

Eu usei justify-content-centerclasse em vez de mx-autocomo nesta resposta .

verifique em https://jsfiddle.net/sarfarazk/4fsp4ywh/

Sarfaraz Kasmani
fonte
2
Isso já foi abordado na resposta mais votada
Jean-François Corbett
@ Jean-François Corbett Eu usei a classe justify-content-center em vez de mx-auto. Este também é um método de fazer isso. As pessoas também podem usar isso. Estou apenas tentando ajudar outras pessoas. Obrigado
Sarfaraz Kasmani
Ah, certo. Bem, um pouco de explicação pode ajudar muito.
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 snippet

Abdo-Host
fonte
1

2020: problema semelhante

Se o seu conteúdo for um conjunto de botões que você deseja centralizar em uma página, envolva-os em uma linha e use justify-content-center.

Amostra de código abaixo:

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

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

</div>
MarcoZen
fonte