2

Bootstrapを使用して、Web サイトのすべてのボタン要素を作成しています。

ボタンの高さは line-height を使用して作成され、テキストの中央揃えにも役立ちます。

1 つのボタンに 2 つの異なるフォント サイズを含めたい。標準サイズ、小さめのノートです。ここでは、jsfiddle を使用して、これの非常に簡素化されたバージョンを作成しました

これがhtmlです。

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

これが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;
}

問題は、ボタンの高さが 4 ピクセル増加することです。小さいテキストを削除すると、ボタンが正しい高さに戻ります。より高いボタンを使用できないため、この問題をどのように解決できますか?

高さ属性を 60px に固定しても、テキストが垂直方向の中央に配置されなくなるため、機能しません。

お手伝いありがとう。

4

1 に答える 1