Center link vertically in a div

Question

There is an "place order" link on the web page, which I want to center both horizontally and vertically. I managed to center it horizontally, but not vertically. I'm using Twitter Bootstrap. This is what it looks like now and the red arrow shows where I'd like to put it:

enter image description here

The HTML:

<div class="container">
    <div class="row">
      <div class="col-md-8">
        <h2 class="specs text-center">specs</h2>
        <p class="text-center"> LENGTH - 1760mm<br />
          TIP WIDTH - 136mm<br />
          WAIST WIDTH - 112mm<br />
          TAIL WIDTH - 126mm<br />
          TIP LENGTH - 300mm<br />
          TAIL LENGTH - 200mm<br />
          CAMBER - 4MM<br />
          TURN RADIUS - 23mtrs<br />
        </p>
      </div>
      <!--end col-md-8-->
      <div class="col-md-4 text-center">
        <h2 class="text-center order"><a href="#">place order</a></h2>
      </div>
      <!--end col-md-4--> 
    </div>
    <!--end row--> 
  </div>
  <!--end container-->

The CSS:

#products .order
{
    background-color: #392e2e;
    padding: 15px;
    display: inline-block;
    vertical-align: middle;
}

#products .order a
{
    color: #ffffff;
    text-decoration: none;
}

h2.order
{
    display: block;
    text-align: center;
}

And here's a link to the project as well, scroll to the very bottom of the page.

Thank you for your help.

Sorry to close it ... realized later that you are using twitter bootstrap but still there should be some question explaining this — Mr. Alien, Feb 25 '15 at 15:18
look at this question, it might help http://stackoverflow.com/questions/22196587/how-to-center-align-vertically-the-container-in-bootstrap — AlexG, Feb 25 '15 at 15:26
possible duplicate of http://stackoverflow.com/questions/20547819/vertical-align-with-bootstrap-3 — Morpheus, Feb 25 '15 at 15:29
@Morpheus, I stumbled upon this thread, but that doesn't fix my problem unfortunately. And I've also googled and struggled with this for a few hours now. I'm lost. :) — bijoume, Feb 25 '15 at 15:39
@bijoume is it because you have white space between vertically aligned divs? — Morpheus, Feb 25 '15 at 15:53
@bijoume works like a charm -> http://jsfiddle.net/vm087c99/ — Morpheus, Feb 25 '15 at 16:00

Maki · Answer 1 · 2015-02-25T16:00:02.337

1

maybe this will help? http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/

.element {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

edited Feb 25 '15 at 16:00

answered Feb 25 '15 at 15:44

Maki

625
4
11
26

user3873473 · Answer 2 · 2015-02-25T15:53:10.783

1

Try this. Have in mind so it works on IE10+, and add a specific class to this row!

.row {
    display: flex;
    align-items: center;
}

edited Feb 25 '15 at 15:53

answered Feb 25 '15 at 15:47

user3873473

11
2

score 1 · Accepted Answer · answered Feb 25 '15 at 15:50

Here's one solution. Add this CSS to your stylesheet:

.row-same-height {
    display: table;
    width: 100%;
}
.col-md-height {
    display: table-cell;
    vertical-align:middle;
    float: none !important;
}

Now, here's your html with the new divs applied.

<div class="container">
    <div class="row">
      <div class="row-same-height">
        <div class="col-md-8">
          <h2 class="specs text-center">specs</h2>
          <p class="text-center"> LENGTH - 1760mm<br />
            TIP WIDTH - 136mm<br />
            WAIST WIDTH - 112mm<br />
            TAIL WIDTH - 126mm<br />
            TIP LENGTH - 300mm<br />
            TAIL LENGTH - 200mm<br />
            CAMBER - 4MM<br />
            TURN RADIUS - 23mtrs<br />
          </p>
        </div>
        <!--end col-md-8-->
        <div class="col-md-height col-md-4 text-center">
          <h2 class="text-center order"><a href="#">place order</a></h2>
        </div>
        <!--end col-md-4--> 
      </div>
    </div>
    <!--end row--> 
  </div>
  <!--end container-->

score 1 · Answer 4 · answered Feb 25 '15 at 16:01

Please check this, I had update code.

#products .order
{
    background-color: #392e2e;
    padding: 15px;
    display: inline-block;
    vertical-align: middle;
}
.container{
    .row{
        display: table;
        width: 100%;
        table-layout: fixed;
    }
}
    .col-md-8,.col-md-4{
        display: table-cell;
    width: 60%;
    float: none !important;
    vertical-align: middle;
    }
.col-md-4{width: 40%;}
}

#products .order a
{
    color: #ffffff;
    text-decoration: none;
}

h2.order
{
    display: block;
    text-align: center;
}

<div class="container">
    <div class="row">
      <div class="col-md-8">
        <h2 class="specs text-center">specs</h2>
        <p class="text-center"> LENGTH - 1760mm<br />
          TIP WIDTH - 136mm<br />
          WAIST WIDTH - 112mm<br />
          TAIL WIDTH - 126mm<br />
          TIP LENGTH - 300mm<br />
          TAIL LENGTH - 200mm<br />
          CAMBER - 4MM<br />
          TURN RADIUS - 23mtrs<br />
        </p>
      </div>
      <!--end col-md-8-->
      <div class="col-md-4 text-center">
        <h2 class="text-center order"><a href="#">place order</a></h2>
      </div>
      <!--end col-md-4--> 
    </div>
    <!--end row--> 
  </div>
  <!--end container-->

Center link vertically in a div

4 Answers4