Center aligning buttons text inside div dynamically?

Question

Tried a lot of solutions I found, but nothing seems to work for me.

I want to center text inside button dynamiclly, no matter the width and height of the button, the text should always be in the center, I'm sure there's a good solution for this. I always find myself struggling with it.

<div class="gform_button">
    <input type="submit" class="gform_button" value="Submit" />
</div>

Tried almost everything, I don't understand why the following code doesn't work:

.gform_button{
    text-align: center;
    vertical-align: middle;
}

If someone please can give me a good explanation of how it works and why the two above lines doesn't centering the text even thou it seems that this is their purpose. I always struggle with centering things.

Thanks in advance!

Answer 1

By default, text inside input[type='submit'] should always be center-aligned (vertically/horizontally). Double-check your styles, maybe you broke the margin/padding of your div/input element.

Answer 2

Please try this:

HTML:

<div class="gform">
    <input type="submit" class="gform_button" value="Submit" />
</div>

css:

input.gform_button{ background-color:blue;color:white}

Also jsfiddle for you:

https://jsfiddle.net/bnhf5hg9/5/

Answer 3

<style type="text/css">
.gform_button{
    text-align: center;
    vertical-align: middle;
    padding:3px;
}
</style>

<div>
    <input type="submit" class="gform_button" value="Submit" />
</div>