Align Text vertically with Bootstrap without fixed height

Asked

Viewed 3,976 times

2

I’m trying to align the text vertically in my header but it seems impossible.

I want my header content to always be in the center vertically, I did horizontal but vertical can’t.

Thank you.

Follow the example code and the images:

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <link href="Content/bootstrap.css" rel="stylesheet" />
    <script src="Scripts/jquery-1.9.1.js"></script>
    <script src="Scripts/bootstrap.js"></script>
</head>
<body>
    <div class="container-fluid">

        <div class="row" style="background-color:gray;">
            <div class="col-md-3" style="background-color:red; text-align:center;">
                <img src="bootstrap-logo.jpg" style="width:100%;" />
            </div>
            <div class="col-md-3" style="background-color:blue; text-align:center;" >
                Quadrado 2
                <br />
                Quadrado 2
                <br />
            </div>
            <div class="col-md-3" style="background-color:red; text-align:center;">
                Quadrado 3
                <br />
            </div>
            <div class="col-md-3" style="background-color:blue; text-align:center;">
                Quadrado 4
                <br />
                Quadrado 4
                <br />
                Quadrado 4
                <br />
                Quadrado 4
                <br />
            </div>
        </div>

        <div class="row" style="height:6px; background-color:black;">
            <div class="col-md-12">
            </div>
        </div>

        <div class="row" style="background-color:gray;">
            <div class="col-md-3" style="background-color:red; text-align:center;">
                <img src="bootstrap-logo.jpg" style="width:100%;" />
            </div>
            <div class="col-md-3" style="background-color:blue; text-align:center;">
                Quadrado 2
                <br />
                Quadrado 2
                <br />
            </div>
            <div class="col-md-3" style="background-color:red; text-align:center;">
                Quadrado 3
                <br />
            </div>
            <div class="col-md-3" style="background-color:blue; text-align:center;">
                Quadrado 4
                <br />
                Quadrado 4
                <br />
                Quadrado 4
                <br />
                Quadrado 4
                <br />
            </div>
        </div>

    </div>
</body>
</html>

Follow the sample images:

inserir a descrição da imagem aqui

inserir a descrição da imagem aqui

css twitter-bootstrap

3 answers

2

Use the padding-top with the Calc.

 <div class="col-md-3" style="background-color:blue; padding-top: calc(x + y);">
     Quadrado 2
     <br />
     Quadrado 2
     <br />
 </div>
 <div class="col-md-3" style="background-color:red; padding-top: calc(x + y);">
      Quadrado 3
      <br />
 </div>

1

Apply these CSS properties:

position: absolute;
top: 50%;
transform: translate(0, -50%);

1

Vertical alignment:

.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

Vertical and horizontal alignment:

.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

You can see more information on this website is very good in that regard.

Browser other questions tagged css twitter-bootstrap

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