在JQuery按钮中垂直调整大小和中心文本

Question

我的页面上有一个按钮html元素，想要使用JQuery按钮，所以

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

这很好用，但我想编辑按钮的样式，即（如标题中所示）我希望使用较小的文本缩短按钮并使文本垂直居中。我试过了

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

这有助于使我的按钮和文本达到我想要的大小，但它不会在按钮中垂直居中。我已尝试设置padding-bottom: 2px;，我已尝试设置line-height: 22px;，并且我已尝试设置vertical-align: center;，但均未设置SELECT your_dimension, avg(t1.val) as median_val FROM ( SELECT @rownum:=@rownum+1 AS `row_number`, IF(@dim <> d.your_dimension, @rownum := 0, NULL), @dim := d.your_dimension AS your_dimension, d.val FROM data d, (SELECT @rownum:=0) r, (SELECT @dim := 'something_unreal') d WHERE 1 -- put some where clause here ORDER BY d.your_dimension, d.val ) as t1 INNER JOIN ( SELECT d.your_dimension, count(*) as total_rows FROM data d WHERE 1 -- put same where clause here GROUP BY d.your_dimension ) as t2 USING(your_dimension) WHERE 1 AND t1.row_number in ( floor((total_rows+1)/2), floor((total_rows+2)/2) ) GROUP BY your_dimension; 。按钮仍然如下：任何帮助将不胜感激。谢谢！

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%);
}

这里要注意的重要事项是你的＆＃34;过程＆＃34; element是自包含的（在它自己的span元素内），并且其父元素的position属性设置为relative。

CSS转换属性可能看起来有点令人困惑，但它基本上使元素完全居中于它的父级内部，无论它如何调整大小。

Fiddle

在我的小提琴中，你可以通过调整css中的div height属性来了解它的中心位置。

希望这有帮助！

Answer 2

尝试使用padding: 0;代替height: 22px;，您的身高将由您的font-size属性定义。

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