5

.wellブートストラップ フレームワークからクラスの垂直方向の中央に配置したいリンクがありbtn btn-danger、アンカー タグでクラスを使用しています。これが下の写真です。使ってみましvertical-align:middle;たが、うまくいかないようです。井戸の空間が上下に均等でないことがわかります。

ここに画像の説明を入力

HTMLは次のとおりです。

<div class="well">
   <%= link_to "Remove", thing, method: :delete, style: "font-size: 11px; float:right; ", :class => 'btn btn-danger'%>

</div>
4

2 に答える 2

4

フローティング要素を垂直方向に整列するべきではないようです (または、単に整列することはできません)。

これが私が提案するものです： 

<div class="well mywell">
    <div class="pull-right myfloater">
       <button class="btn btn-danger vcenter">Remove</button>    
    </div>
    <p><!-- things --></p>
</div>

.mywell{
   height: 150px;
}
.myfloater {
    line-height: 150px;
}
.vcenter{
    vertical-align: middle;
}

実際の例: http://jsfiddle.net/Sherbrow/wxM5Z/2/

編集

line-heightフローティング要素に適用するとより効果的です。

于 2012-06-25T08:51:12.333 に答える
3

多分これがあなたが必要とするものです: jsfiddle。

デフォルトのブートストラップを上書きしないように、新しいクラスを追加しました。

于 2012-06-25T08:03:50.023 に答える