Vertical alignment block bootstrap

Question

I have two buttons :

<div class="container-fluid">
    <div class="row">
        <div class="col-lg-12">
            <div class="main">
                <button class="btn-primary btn-lg center-block ">Sign in </button><br> 
                <button class="btn-primary btn-lg  center-block">Sign up </button> 
            </div>
        </div>
    </div>
</div>

How can I do vertical align? I want that buttons be in center .

I try margin-top:50% but it doesnt work for me.

Possible duplicate of [vertical-align with bootstrap 3](http://stackoverflow.com/questions/20547819/vertical-align-with-bootstrap-3) — JD Davis, Nov 24 '15 at 22:44

score 1 · Answer 1 · answered Nov 24 '15 at 23:11

If you're just putting these on the center of the page you don't need the row/column setup but if you do have a need then place the .main div around your row/column.

Note: I would use btn-block for your buttons and you also don't need center-block.

See example Snippets.

No Row/Column Example

.main {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />

<div class="main">
  <button class="btn-primary btn-lg btn-block">Sign in</button>
  <br>
  <button class="btn-primary btn-lg btn-block">Sign up</button>
</div>

With Row/Column Example

.main {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
  <div class="main">
    <div class="row">
      <div class="col-lg-12">
        <button class="btn-primary btn-lg btn-block">Sign in</button>
        <br>
        <button class="btn-primary btn-lg btn-block">Sign up</button>
      </div>
    </div>
  </div>
</div>

Vertical alignment block bootstrap

1 Answers1