Align Text vertically with Bootstrap without fixed height

Question

Align Text vertically with Bootstrap without fixed height

Navigation

#1 by (2 votes)
#2 by (1 votes)
#3 by (1 votes)

2

I'm trying to align 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 not vertical.

Thank you.

Here is the sample 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:

css twitter-bootstrap

asked by anonymous 18.08.2016 / 20:09

3 answers

Change formatting of a link Organize data in excel

score 2 · Answer 1

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>

score 1 · Answer 2

1

Apply these CSS properties:

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

22.08.2016 / 03:12

score 1 · Answer 3

Vertical Alignment:

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

Alignment vertically and horizontally:

.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 at that.