CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
JMA
JMA

Reputation: 994

How to make the text vertically centered bootstrap

I have this output:

enter image description here

Here is my code:

<div class="modal-footer">
    <button type="button" class="btn btn-success pull-right">Send</button>
    <div id="total" class="pull-right vcenter">Total Amount: 0.00</div>
</div>

And here is the CSS:

.vcenter {
    display: inline-block;
    vertical-align: middle;
    float: none;
}

I want to make it like this:

enter image description here

What is the better way to do this?

Upvotes: 0

Views: 49

Answers (4)

Pardeep Pathania
Pardeep Pathania

Reputation: 1538

you can use this 

.vcenter {
    display: inline-block;
    vertical-align: middle;
    line-height: 30px;
}

by using float along with not solve your issue. so just leave that.

Upvotes: 0

claudios
claudios

Reputation: 6656

This will solve the issue.

.align {
    line-height: 34px;
    margin: 0;
    display: inline-block;
}

Html:

<button type="button" class="btn btn-success pull-right">Send</button>
<p id="total" class="vcenter">Total Amount: 0.00</p>

Upvotes: 0

user6160478
user6160478

Reputation: 119

Floats aren't the answer here. If you want vertical-align to work properly, both elements need to be display: inline-block;.

Upvotes: 1

Gaurav Aggarwal
Gaurav Aggarwal

Reputation: 10197

set line-height equal to button height. Suppose height of button is 30px so css should be 

.vcenter {
    display: inline-block;
    vertical-align: middle;
    float: none;
    line-height: 30px;
}

line-height will set the height of text so equal height of text and button will give us vertically centered look

Upvotes: 0

Related Questions