Vertical align text in a Div with respect to Rows

Question

I am trying to align the text "address" in left div vertically. But i am unable to.

Here is the code,

div.row {
  border: 1px solid black;
  padding: 10px;
}

.centre {
  display: block;
  text-align: center;
  vertical-align: middle;
  background: yellow;
  height: 100%;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
  <div class="row">
    <div class="col-md-3 centre">
      <label>Address</label>
    </div>
    <div class="col-md-6">
      <div class="row">
        <!--nested row one-->
        <div class="col-md-6">
          <label>Street</label>
        </div>
        <div class="col-md-6">
          <input name="stname">
        </div>
      </div>
      <div class="row">
        <!--nested row two-->
        <div class="col-md-6">
          <label>Landmark</label>
        </div>
        <div class="col-md-6">
          <input name="lmark">
        </div>
      </div>
      <div class="row">
        <!--nested row three-->
        <div class="col-md-6">
          <label>Zip code</label>
        </div>
        <div class="col-md-6">
          <input name="zipcode">
        </div>
      </div>
    </div>
  </div>
  <!--row end-->
</div>

What am i doing wrong. I am using bootsrap 3.

Plunker: https://plnkr.co/edit/cu4ZJVSp3jYTyBwz4NKB?p=preview (View Plunker in full screen)

I am trying to have result similar to this. The coloured borders are only for representation .

The address field should be vertically aligned with respect to the three nested rows in left. Please view plunker's output in a separate window, the address is at top of the page, its not aligned vertically. — Gowtham Raj J, Sep 22 '17 at 13:35
Possible duplicate of [How do I vertically center text with CSS?](https://stackoverflow.com/questions/8865458/how-do-i-vertically-center-text-with-css) — Germano Plebani, Sep 22 '17 at 13:38
Why don't you declare a top margin for that element, equal to the value of the top padding of `col-md-6`? What have you tried? — UncaughtTypeError, Sep 22 '17 at 13:40
G-Cyr Thanks for editing, @mayank Please run code snippet and click full page. — Gowtham Raj J, Sep 22 '17 at 13:41
You can't add height 100% because css don't know how much is 100% unless the container of the element have a defined height. — Germano Plebani, Sep 22 '17 at 13:43
@GermanoPlebani Yes, so how do I let css know the height of the container. It depends on the height of its adjacent column. — Gowtham Raj J, Sep 25 '17 at 06:25
You can set equal height of column in bootstrap in different way. See this: https://stackoverflow.com/questions/19695784/how-can-i-make-bootstrap-columns-all-the-same-height — Germano Plebani, Sep 25 '17 at 07:53

score 0 · Answer 1 · answered Sep 22 '17 at 13:38

You are setting the styles to the center div, instead it should be the label inside the center div

<!DOCTYPE html>
<html>

<head>
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  <script src="script.js"></script>
  <style>
    div.row div{
      border: 1px solid black;
      padding: 10px;
    }
    .centre label{
      display: block;
      text-align: center;
      vertical-align: middle;
      background: yellow;
      height: 100%;
      padding:5px;
    }
  </style>
</head>
<body>
  <div class="container-fluid">
    <div class="row">
      <div class="col-md-3 centre">
        <label>Address</label>
      </div>
      <div class="col-md-6">
        <div class="row"><!--nested row one-->
          <div class="col-md-6">
            <label>Street</label>
          </div>
          <div class="col-md-6">
            <input name="stname">
          </div>
        </div>
        <div class="row"><!--nested row two-->
          <div class="col-md-6">
            <label>Landmark</label>
          </div>
          <div class="col-md-6">
            <input name="lmark">
          </div>
        </div>
        <div class="row"><!--nested row three-->
          <div class="col-md-6">
            <label>Zip code</label>
          </div>
          <div class="col-md-6">
            <input name="zipcode">
          </div>
        </div>
      </div>
    </div><!--row end-->
  </div>
</body>

</html>

Dhaval Jardosh · Answer 2 · 2017-09-25T17:30:48.497

Code Pen

You can remove the offset and match it up to 12-grid system.

div.row {
  border: 1px solid black;
  padding: 10px;
}

.centre {
  background: yellow;
  top: 60px;
  border: 1px solid blue;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <div class="col-xs-3 centre">
      <label>Address</label>
    </div>

    <div class="col-xs-8 col-sm-offset-1" style="border:1px solid green">
      <!--You can remove style and remove offset and change it to sm-9 -->
      <div class="row">
        <!--nested row one-->
        <div class="col-xs-6">
          <label>Street</label>
        </div>
        <div class="col-xs-6">
          <input name="stname">
        </div>
      </div>
      <div class="row">
        <!--nested row two-->
        <div class="col-xs-6">
          <label>Landmark</label>
        </div>
        <div class="col-xs-6">
          <input name="lmark">
        </div>
      </div>
      <div class="row">
        <!--nested row three-->
        <div class="col-xs-6">
          <label>Zip code</label>
        </div>
        <div class="col-xs-6">
          <input name="zipcode">
        </div>
      </div>
    </div>
  </div>
  <!--row end-->
</div>

As for now, margin-top is a worth option trying.

FelipeAls · Answer 3 · 2017-09-25T08:27:17.167

0

Here's a solution setting top margin/padding on columns not nested then cancelling top margin/padding in nested ones:

Plunkr

Relevant CSS:

[class*="col-"] {
  border: 1px solid black;
  padding: 10px;
}
.row:first-child [class*="col-"] {
  margin-top: 10px;
  background-color: lightgreen;
}
.row .row:first-child [class*="col-"] {
  margin-top: -10px;
  background-color: pink;
}
.row .row:not(:first-child) [class*="col-"] {
  margin-top: 0;
  background-color: lightblue;
}

Solution by @codegeek which avoids these problems is better imho :)

edited Sep 25 '17 at 08:27

answered Sep 22 '17 at 13:47

FelipeAls

21,711
8
54
74

I am not trying to style the columns, but to align the column on the left vertically wrt the column on the right. – Gowtham Raj J Sep 25 '17 at 06:30
I used bad wording: by _styling columns_ I meant "setting/cancelling top margin/padding" on them – FelipeAls Sep 25 '17 at 08:28

score 0 · Answer 4 · answered Sep 22 '17 at 13:50

you can add this code in your CSS file to get vertical-align. but first, you have to add a new class with row class

    <!DOCTYPE html>
<html>

<head>
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  <script src="script.js"></script>
  <style>

   .vertical > div {
    display: table-cell;
    vertical-align: middle;
    float: none;
}

.vertical > div {
    display: table-cell;
    vertical-align: middle;
    float: none;
}
    div.row div{
      border: 1px solid black;
      padding: 10px;
    }
    .centre label{
      display: block;
      text-align: center;
      vertical-align: middle;
      background: yellow;
      height: 100%;
      padding:5px;
    }
  </style>
</head>
<body>
  <div class="container-fluid">
    <div class="row vertical">
      <div class="col-md-3 centre">
        <label>Address</label>
      </div>
      <div class="col-md-6">
        <div class="row"><!--nested row one-->
          <div class="col-md-6">
            <label>Street</label>
          </div>
          <div class="col-md-6">
            <input name="stname">
          </div>
        </div>
        <div class="row"><!--nested row two-->
          <div class="col-md-6">
            <label>Landmark</label>
          </div>
          <div class="col-md-6">
            <input name="lmark">
          </div>
        </div>
        <div class="row"><!--nested row three-->
          <div class="col-md-6">
            <label>Zip code</label>
          </div>
          <div class="col-md-6">
            <input name="zipcode">
          </div>
        </div>
      </div>
    </div><!--row end-->
  </div>
</body>

</html>

score 0 · Accepted Answer · answered Dec 25 '17 at 22:20

I positioned the left div by using top: 50%(takes the height of the parent) and then using translateY, which takes the height of the current element.

Since relative positioning didnt take % values, I have used absolute. But giving absolute makes the div come out of the document flow, hence used "left" for the right sibling with the width of the left sibling.

.parent{
  position: relative;
}
.centre{
  background: yellow;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
.right{
  left: 25%;
  /* width of left sibling, since col-md-3 is 25%*/
  background: lightgreen;
}

Plnkr Link(with bootstrap) or JsFiddle (without Bootstrap)

Result:

Maharkus · Answer 6 · 2017-09-22T13:48:16.947

Your vertical-align:middle doesn't work, because elements with display: block cannot be centered that way. An easy alternative would be to use display: flex.

Here is a snippet to demonstrate the way display:flex can be used to center pretty much everything:

    div.row div{
      border: 1px solid black;
      padding: 10px;
    }
    .centre{
      display: block;
      text-align: center;
      vertical-align: middle;
      background: yellow;
      height: 100%;
    }
    .flex {
    display: flex;
    align-items: center;
    }

  <div class="container-fluid">
    <div class="row">
      <div class="flex">
      <div class="col-md-3 centre">
        <label>Address</label>
      </div>
      <div class="col-md-6">
        <div class="row"><!--nested row one-->
          <div class="col-md-6">
            <label>Street</label>
          </div>
          <div class="col-md-6">
            <input name="stname">
          </div>
        </div>
        <div class="row"><!--nested row two-->
          <div class="col-md-6">
            <label>Landmark</label>
          </div>
          <div class="col-md-6">
            <input name="lmark">
          </div>
        </div>
        <div class="row"><!--nested row three-->
          <div class="col-md-6">
            <label>Zip code</label>
          </div>
          <div class="col-md-6">
            <input name="zipcode">
          </div>
        </div>
      </div>
      </div>
    </div><!--row end-->
  </div>

EDIT: maybe this guide might be of interest for you: Centering in CSS: A Complete Guide

Flex is a great alternative as well. – Dhaval Jardosh Sep 22 '17 at 13:47 — Dhaval Jardosh, Sep 22 '17 at 13:47

Vertical align text in a Div with respect to Rows

6 Answers6