.well類中的垂直中心bootstrap btn

我有一個鏈接，我想要在引導框架的.well類中垂直居中，並且在錨標記上使用類btn btn-danger。這是下面的圖片。我試圖使用vertical-align:middle;，但似乎沒有工作。你可以看到井上的空間甚至不在頂部和底部。.well類中的垂直中心bootstrap btn

enter image description here

下面是HTML：

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

</div>

來源

2012-06-25 locoboy

你可以發佈你使用它的完整HTML嗎？我們需要在使用'vertical-align'之前將'display'設置爲'inline-block'。 –

我發佈了它。我也嘗試設置'display：inline-block; vertical-align：middle;'這似乎也不起作用。 – locoboy

我嘗試過'margin-top：-3px;'這似乎工作，但它並不像我想要的那樣健壯。 – locoboy

也許這就是你需要：jsfiddle。

我已經添加了新類，以免覆蓋默認引導程序。

來源

2012-06-25 08:03:50 Xella

看來你不應該（或者根本不能）垂直對齊一個浮動元素。

這裏是我建議：

<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-25 08:51:12 Sherbrow

.well類中的垂直中心bootstrap btn

回答

相關問題