Bootstrap vertical align button inside div

Question

this is sample code

<section class="col-md-12"> 
  <div class="col-xs-6 col-xs-offset-3 col-sm-6 col-sm-offset-3 col-md-6 col-md-offset-3 pull-right">
    <button ><a href="" class=" text-center">Test Btn</a></button>
  </div>
</section>

Is there way to set vertical aligment to middle for button for all screens ? I currently do that with margin-top in media queries, but it is "too much" coding, and just to ask for any simpler ideas ?

Tnx, P

Possible duplicate of [vertical-align with Bootstrap 3](http://stackoverflow.com/questions/20547819/vertical-align-with-bootstrap-3) — GottZ, Apr 01 '16 at 12:40

score 3 · Answer 1 · answered Jul 20 '20 at 16:06

3

.align-self-center will work.

eg

<section class="col-md-12 align-self-center"> 
</section>

answered Jul 20 '20 at 16:06

George

2,842
2
15
11

score 2 · Accepted Answer · answered Apr 01 '16 at 12:53

2

Is this the solution you want?

http://output.jsbin.com/solomikebe

Essentially, this is the code

.parent {
  height: 200px;
  background-color: red;
  display: flex;
  flex-direction: row;
  align-items: center;
}

where the container div has parent class.

answered Apr 01 '16 at 12:53

Bikas

2,709
14
32

I found something similar, but this also solve problem! Tnx – pavlenko Apr 01 '16 at 13:08
You're welcome. I always loved Flex and hence my solution revolves around it. – Bikas Apr 01 '16 at 13:29

Bootstrap vertical align button inside div

2 Answers2