Geek asks and answers

Vertically central btn bootstrap in .well class

I have a link that I want to center vertically in a class .wellfrom the bootstrap framework and use the class btn btn-dangerin the anchor tag. Here's a snapshot below. I tried to use vertical-align:middle;, but this does not seem to work. You can see that the space on the well is not even above and below.

enter image description here

Here is the HTML:

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

</div>
+5
source share
2 answers

Perhaps this is what you need: jsfiddle .

I added new classes so as not to overwrite the default boot file.

+3
source

It looks like you shouldn't (or just can't) vertically align the floating element.

Here is what I suggest:

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

Edit

line-height .

+5

More articles:


All Articles