CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Michael Frey
Michael Frey

Reputation: 918

Height of bootstrap button changes with additional span

I am using Bootstrap to create all button elements on our website.

The button height is created using line-height, which also helps with centering the text.

I want to include two different font sizes in one button. The standard size, and a smaller note. I have created a very stripped down version of this here with jsfiddle

This is the html.

<div class="button">
    test
    <small>(note)</small>
</div>

This is the CSS.

.button {
    background-color: orange;
    color: #fff;
    width: 150px;
    line-height: 60px;
    font-size: 26px;
    text-align: center;
    vertical-align: middle;
}

small {
    font-size: 15px;
}

The issue is that the height of the button gets increased by 4 pixels. Removing the smaller text, will again bring the button to it's correct height. How can solve this problem as I cannot have a higher button?

Having a fixed height attribute of 60px does not work either, because then the text is not centered vertically anymore.

Thank you for the help.

Upvotes: 2

Views: 3373

Answers (1)

Shikiryu
Shikiryu

Reputation: 10219

It gets OK (on chrome) if you add a vertical-align to your small tag

http://jsfiddle.net/eAZCN/3/

.button {
    background-color: orange;
    color: #fff;
    width: 150px;
    line-height: 60px;
    font-size: 26px;
    text-align: center;
    vertical-align: middle;
}

.button small {
    font-size: 15px;
    vertical-align: middle;
    line-height:10px;
}

Upvotes: 2

Related Questions