3

eu quero alinhar o texto verticalmente na div, mas gostaria de saber se é possivel faze-lo sem alterar o css porque eu estou a utilizar o https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css

<div class="sticky-top">
<div class="container-fluid bg-secondary" style="height:70px;"> 
<div class="row"> 
<div class="col-md-1" style="text-align: center">Referência</div> 
<div class="col-md-2" style="text-align: center">Diametro do Aço (DE)</div> 
<div class="col-md-2" style="text-align: center">Comprimento Total (L0)</div> 
<div class="col-md-2" style="text-align: center">Diametro Exterior</div> 
<div class="col-md-1" style="text-align: center">Passo</div> 
<div class="col-md-1" style="text-align: center">Preço</div> 
<div class="col-md-3" style="text-align: center"></div>  
</div>
</div>
</div>

este é o meu codigo, e este é o resultado: inserir a descrição da imagem aqui

Antes eu tinha um jumbotron e os textos estavam alinhados no centro,mas o jumbotron é muito alto, e ocupava muito espaço.

2
  • neste caso não e melhor usar uma tabela 14/05/2018 às 11:17
  • Recomendo usar uma tabela para montar, já que graficamente ele está idêntico a uma. Dê uma olhada na documentação das tabelas, creio que vá te ajudar. Link: getbootstrap.com/docs/4.1/content/tables
    – brnTwp
    14/05/2018 às 11:28

1 Resposta 1

1

Sim é possível resolver apenas com classes nativas do Bootstrap 4, pois o display das .row é flex por default.

Basta vc colocar a altura na .row e não no container, depois vc usa a classe align-items-center para alinhar na vertical. Aqui vc pode ler a documentação oficial. https://getbootstrap.com/docs/4.0/utilities/flex/#align-items

Veja como fica no exemplo abaixo. Repare que agora a row que tem 70px de altura, e está com a classe align-items-center

OBS: Como vc ainda não fez o tratamento responsivo aqui no Snippet vai abrir quebrado. Mas se vc manda exibir como "Página toda" vc vai ver que fica certinho!

<link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" />

<div class="sticky-top">
        <div class="container-fluid bg-secondary">
            <div class="row align-items-center" style="height:70px;">
                <div class="col-md-1 d-flex align-items-center" style="text-align: center">Referência</div>
                <div class="col-md-2" style="text-align: center">Diametro do Aço (DE)</div>
                <div class="col-md-2" style="text-align: center">Comprimento Total (L0)</div>
                <div class="col-md-2" style="text-align: center">Diametro Exterior</div>
                <div class="col-md-1" style="text-align: center">Passo</div>
                <div class="col-md-1" style="text-align: center">Preço</div>
                <div class="col-md-3" style="text-align: center"></div>
            </div>
        </div>
    </div>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .