How to vertical align middle a button in a dynamic div

Question

I'd like to center a vertically aligned button in a div using bootstrap

<div class="row" >
    <div class="col-xs-2">
        <button class="btn" style="color: #660066;">
            <i class="fa fa-arrow-left" data-ng-click="onClickBack()" ></i>
        </button>
    </div>
    <div class="col-xs-10">
        <h4> {{rootNode.nodeName}}</h4>
    </div>
</div>

As you see, I have two columns,one containing a button in the left, another containing Label. When label.length is increased then the div'll change the height -> I want the button to be always centered in the div.

Did you try using the offset-md-x classes? – Ares Oct 29 '13 at 04:15 — Ares, Oct 29 '13 at 04:15

score 11 · Answer 1 · edited May 23 '17 at 12:02

11

You can use display:inline-block and vertical-align:middle:

.col-xs-2, .col-xs-10 {
    display: inline-block;
    float: none;
}
.col-xs-10 {
    vertical-align: middle;
}

Here's a demo fiddle.

Though you will have to make sure to remove the white space in between the column <div>s in your markup. Refer to this answer for more information on that.

edited May 23 '17 at 12:02

Community

1
1

answered Oct 29 '13 at 05:50

omma2289

54,161
8
64
68

score 7 · Answer 2 · answered Mar 07 '15 at 17:47

7

I used this. Check the "style property". That will do the trick.

style='position: absolute;top: 50%;left: 50%;margin-right: -50%;transform: translate(-50%, -50%)'>

<span class='glyphicon glyphicon-refresh spinning'>
</span> Loading...</button>

answered Mar 07 '15 at 17:47

arn-arn

1,328
1
21
31

Carol Skelly · Answer 3 · 2014-01-16T11:22:34.340

The problem is that the padding on the H4 is more than the button. You can wrap you button inside the H4 (perhaps not the best practice), or change the button padding in your CSS..

<div class="row">
  <div class="col-xs-2">
    <h4>
    <button class="btn" style="color: #660066;">
        <i class="fa fa-arrow-left" data-ng-click="onClickBack()"></i>
    </button>
    </h4>
  </div>
  <div class="col-xs-10">
    <h4> {{rootNode.nodeName}}</h4>
  </div>
</div>

OR, leave the button as is, and apply this CSS to the H4..

h4 {
  margin-top: -0.5em;
}

How to vertical align middle a button in a dynamic div

3 Answers3

http://bootply.com/106259

Linked