[英]Center aligning buttons text inside div dynamically?
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! 提前致谢!
By default, text inside input[type='submit']
should always be center-aligned (vertically/horizontally). 默认情况下, input[type='submit']
文本应始终居中对齐(垂直/水平)。 Double-check your styles, maybe you broke the margin/padding of your div/input element. 仔细检查您的样式,也许您破坏了div / input元素的边距/填充。
Please try this: 请尝试以下方法:
HTML: HTML:
<div class="gform">
<input type="submit" class="gform_button" value="Submit" />
</div>
css: CSS:
input.gform_button{ background-color:blue;color:white}
Also jsfiddle for you: jsfiddle也为您服务:
https://jsfiddle.net/bnhf5hg9/5/
<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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.