在JQuery按鈕中垂直調整大小和居中文本

Question

我的頁面上有一個html按鈕元素，想要使用JQuery按鈕，所以我這樣做

$( "#myButton" ).button();

這很好用，但是我想編輯按鈕的樣式，即（如標題中所述），我想用較小的文本使按鈕更短並使文本垂直居中。 我試過了

#myButton {
    height: 22px;
    font-size: 16px !important;
}

這可以使按鈕和文本的大小達到我想要的大小，但是它不能使文本在按鈕中垂直居中。 我試過設置padding-bottom: 2px; ，我嘗試設置line-height: 22px; ，並且我嘗試設置vertical-align: center; ，但沒有一個有效。 該按鈕仍然看起來像： 任何幫助將不勝感激。 謝謝！

Answer 1

為了使小元素相對於父元素居中，我通常只使用絕對定位：

HTML

<div>
    <span>Process</span>
</div>

CSS

div {
    position: relative;
    border: 5px solid grey;
    background: black;
    color: white;
    width: 200px;
    height: 300px;
}

span {
    position: absolute;
    bottom: 50%;
    right: 50%;
    transform: translate(50%, 50%);
}

這里要注意的重要事項是“ Process”元素是獨立的（在它自己的span元素內部），並且其父元素的position屬性設置為relative。

CSS轉換屬性可能看起來有些混亂，但是無論如何調整其大小，它本質上都能使元素在其父元素的內部完美居中。

小提琴

在我的小提琴中，您可以通過在CSS中調整div的height屬性來查看其居中height 。

希望這可以幫助！

Answer 2

嘗試使用padding: 0; 而是height: 22px; 您的身高將由您的font-size屬性定義。

示例： https ： //jsfiddle.net/dmonti/mz8k7kkw/