Adjust size and center text vertically in a JQuery button

Question

I have a button html element on my page and want to use the JQuery button so I do

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

This works great, but I want to edit the style of the button, namely (as it says in the title) I want to make the button shorter with smaller text and center the text vertically. I've tried

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

And this works in terms of making my button and text the size I want them, but it doesn't center the text vertically in the button. I've tried setting padding-bottom: 2px; , I've tried setting line-height: 22px; , and I've tried setting vertical-align: center; , but none have worked. The button still looks like: Any help would be greatly appreciated. Thanks!

Answer 1

For centering small elements relative to a parent I usually just use absolute positioning:

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

The important things to note here are that your "Process" element is self-contained (inside it's own span element), and that its parent element's position property is set to relative.

The CSS transform property might look a little confusing, but it essentially keeps the element perfectly centered inside of it's parent, no matter how it's resized.

Fiddle

In my fiddle, you can see how it centers by adjusting the div 's height property in the css.

Hope this helps!

Answer 2

Try to use padding: 0; instead height: 22px; and your height will be defined by your font-size attribute.

Example: https://jsfiddle.net/dmonti/mz8k7kkw/