How to vertical align middle a button in a dynamic

问题:

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.

回答1:

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.

回答2:

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>

回答3:

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;
}

http://bootply.com/106259