web-dev-qa-db-ja.com

ダイナミックdivのボタンの中央に垂直に配置する方法

ブートストラップを使用して、divの垂直に配置されたボタンを中央に配置したい

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

ご覧のとおり、2つの列があります。1つは左側にボタンがあり、もう1つはラベルがあります。 label.lengthを大きくすると、divの高さが変わります->ボタンを常にdivの中央に配置します。

html5css3twitter-bootstrapuser-interfacetwitter-bootstrap-3
13
Bita Ho

display:inline-blockとvertical-align:middleを使用できます：

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

これがデモフィドルです。

ただし、マークアップの列<div>sの間の空白を必ず削除する必要があります。詳細については、 this answer を参照してください。

11
koala_dev

これを使用しました。 「スタイルプロパティ」を確認します。これでうまくいきます。

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

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

問題は、H4のパディングがボタン以上であるということです。ボタンをH4（おそらくベストプラクティスではない）内にラップするか、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>

または、ボタンをそのままにして、このCSSをH4に適用します。

h4 {
  margin-top: -0.5em;
}

http://bootply.com/106259

2
Zim