Reputation: 994
I have this output:
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:
What is the better way to do this?
Upvotes: 0
Views: 49
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
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
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
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