align text vertically within a CSS div || HTML

Navigation
3

I want to align the text vertically in the div, but I would like to know if it's possible to do it without changing the css because I'm using link 

<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>

This is my code, and this is the result:

Before I had a jumbotron and the texts were aligned in the center, but the jumbotron is very tall, and took up a lot of space.

    
asked by anonymous 14.05.2018 / 12:00

1 answer

1

Yes it is possible to resolve only with native Bootstrap 4 classes, since the .row display is flex by default .

Just put the height in the .row and not in the container , then you use the align-items-center class to align vertically. Here you can read the official documentation. link

See the example below. Notice that now the row that is 70px tall, and has the class align-items-center

OBS: As you have not yet done the responsive treatment here on Snippet will open broken. But if you have display as "All Page" you will see that it is right! 

<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>
    
14.05.2018 / 13:27
Help! How does this select work? Focusing on an element