align text vertically within a <div> CSS || HTML

Asked

Viewed 614 times

3

i want to align the text vertically in div, but I wonder if it is possible to do it without changing the css because I am using the 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>

this is my code, and this is the result: inserir a descrição da imagem aqui

Before I had a Jumbotron and the texts were aligned in the center,.

html css twitter-bootstrap

  • in this case it is not better to use a table

  • I recommend using a table to assemble, since graphically it is identical to one. Take a look at the documentation of the tables, I think will help you. Link: https://getbootstrap.com/docs/4.1/content/tables/

1 answer

1


Yes it is possible to solve only with native Bootstrap 4 classes, because the .row is flex for default.

Just you put the height on .row and not in the container, then you use the class align-items-center to align vertically. Here you can read the official documentation. https://getbootstrap.com/docs/4.0/utilities/flex/#align-items

See how it looks in the example below. Note that now Row which is 70px high, and is with the class align-items-center

OBS: As you have not done the responsive treatment here in the Snippet will open broken. But if you tell display as "Whole page" You’ll see that it looks 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>

Browser other questions tagged html css twitter-bootstrap

You are not signed in. Login or sign up in order to post.