动态中心对齐div中的按钮文本？

Question

尝试了很多我找到的解决方案，但似乎没有什么对我有用。

我想动态地将文本置于按钮内部，无论按钮的宽度和高度如何，文本应始终位于中心，我相信这是一个很好的解决方案。我总是发现自己在努力奋斗。

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

几乎尝试了一切，我不明白为什么以下代码不起作用：

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

如果有人请的话可以给我一个很好的解释它是如何工作的，以及为什么上述两行不会使文本居中，即使你认为这是他们的目的。我一直在努力集中精力。

提前致谢！

Answer 1

默认情况下，input[type='submit']内的文字应始终居中对齐（垂直/水平）。仔细检查你的样式，也许你打破了div / input元素的边距/填充。

Answer 2

请试试这个：

HTML：

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

的CSS：

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

也适合你：

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>