Vertical align a Row bootstrap Full Page

Question

<div class="container">
    <div class="row">
        <div class="col-lg-4 col-sm-6"><div class="text-center"><a class="btn btn-default btn-lg" href="#" role="button">Sell</a></div></div>
        <div class="col-lg-4 col-sm-6"><div></div></div>
        <div class="col-lg-4 col-sm-12"><div class="text-center"><a class="btn btn-default btn-lg" href="#" role="button">Buy</a></div></div>
    </div>
</div>

Ok so iam wanting the 2 buttons next to eachother as they are but want them both in the middle of the screen (Vertically)

score 0 · Accepted Answer · answered Jul 26 '15 at 11:15

0

Hey try setting the columns text-align left and right like this: This will make 2 columns and format the left column as text-right and the right column as text left, which will bring them together in the center of the screen:

<div class="container">
   <div class="row">
      <div class="col-xs-6 text-right">
         <a class="btn btn-default btn-lg" href="#" role="button">Sell</a>
      </div>
      <div class="col-xs-6 text-left">
          <a class="btn btn-default btn-lg" href="#" role="button">Buy</a>
      </div>
   </div>
</div>

answered Jul 26 '15 at 11:15

DerCommodore

88
1
10

Hi thanks so much that is a lot better way to do things i was wondering if you could also help me try center the 2 buttons in the middle of the page vertically for example vertical-align – Jul 26 '15 at 11:21
Hey you are welcome - please don't forget to mark the answer as correct though. You can vertically center the row my just giving it a margin-top: 45% or whatever. Other methods include using: positioning: absolute; top: 45% to the container. – DerCommodore Jul 26 '15 at 11:26
Thanks so much am new at this XD – Jul 26 '15 at 11:27

score 0 · Answer 2 · edited May 23 '17 at 12:14

From this refference, you can check this out:

<div class="outer">
  <div class="middle">
    <div class="inner">

      <a class="btn btn-default btn-lg" href="#" role="button">Sell</a>
      <a class="btn btn-default btn-lg" href="#" role="button">Buy</a>
    </div>
  </div>
</div>

CSS:

.outer {
    display: table;
    position: absolute;
    height: 100%;
    width: 100%;
}

.middle {
    display: table-cell;
    vertical-align: middle;
}

.inner {
    text-align:center;
    margin-left: auto;
    margin-right: auto; 
}

Codepen link: http://codepen.io/anon/pen/zGmagX

Vertical align a Row bootstrap Full Page

2 Answers2