CSS CSS对齐提交按钮?
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/8449411/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS to align a submit button?
提问by antonpug
I have a submit button on a form tag is input, obviously. Text-align obviously does not work. I don't want to use margin-left because my width might change later on and I want it to be more "proper". Any way you can think of?
显然,我在表单标签上有一个提交按钮是输入。文本对齐显然不起作用。我不想使用 margin-left 因为我的宽度稍后可能会改变,我希望它更“合适”。你能想到什么办法吗?
HTML:
HTML:
<input type="submit" value="Subscribe" name="jetpack_subscriptions_widget">
CSS:
CSS:
#blog_subscription-3 input[name="jetpack_subscriptions_widget"] {
margin-left:25px;
}
采纳答案by Krik
Just set the "top", "left", "bottom" or "right" elements. Now the html element that the button is inside of will need to be sized to allow moving it around. For example if the button is in side a of a "span" tag the "span" tag will only be the size of the button (plus any other content in the span). As long as there is space to move it in the parent element one of those four should do the trick.
只需设置“顶部”、“左侧”、“底部”或“右侧”元素。现在按钮所在的 html 元素需要调整大小以允许移动它。例如,如果按钮位于“span”标签的 a 侧,“span”标签将仅是按钮的大小(加上 span 中的任何其他内容)。只要有空间在父元素中移动它,这四个元素之一就可以解决问题。
回答by Joseph Katzman
It works for me. I saw that some people forgot about display
property.
这个对我有用。我看到有些人忘记了display
财产。
#container input[type=button]
{
display: block;
margin: 0 auto;
}
回答by Vinicius Santana
There's a common trick on css to align elements on the center.
css 有一个常见的技巧来在中心对齐元素。
All you got to do is, set the margins to auto.
您所要做的就是将边距设置为自动。
margin: 0 auto;
边距:0 自动;
回答by Dominic Green
If you want to center it then
如果你想居中,那么
#blog_subscription-3 input[name="jetpack_subscriptions_widget"] {
margin: 0 auto;
}
Or
或者
#blog_subscription-3 input[name="jetpack_subscriptions_widget"] {
margin-left:auto;
margin-right:auto;
}