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}

jsfiddle也为您服务：

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>