Html 左边距:自动和右边距:自动不处理输入

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/9226151/
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

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-28 22:26:21  来源:igfitidea点击:

margin-left: auto and margin-right: auto not working on input

csshtml

提问by Zaki Aziz

I have an input in a form that I am trying to align in the center. Usually margin-left:autoand margin-right: autofail to respond when display: blockisn't added to the CSS. I have added display: blockto my CSS but still it isn't display as I would like it to.

我有一个表单输入,我试图在中心对齐。通常margin-left:automargin-right: auto不能响应时,display: block不加入CSS。我已经添加display: block到我的 CSS 中,但它仍然没有像我希望的那样显示。

I've made a JSFiddle to keep easier to understand: http://jsfiddle.net/XnKDQ/97/

我制作了一个 JSFiddle 以便于理解:http: //jsfiddle.net/XnKDQ/97/

回答by Christoph

In order for margin: 0 auto;to work, in addition to display:blocka widthneeds to be specified.

为了margin: 0 auto;工作,除了display:blockawidth需要被指定。

回答by Mike

In my case, it was float: leftthat I forgot about. So, make sure you apply float: noneto your input field.

就我而言,这是float: left我忘记了。因此,请确保您适用float: none于您的输入字段。

You already have display: blockand margin: 0 auto, you just need to set width too.

你已经有了display: blockand margin: 0 auto,你只需要设置宽度。

Example that should work:

应该工作的例子:

input{
     width:50% !important;
     margin:0 auto !important;
     display:block !important;
     float:none !important;
}

If that doesn't work try adding !importantto the values or make sure your style is not overwritten by something else.

如果这不起作用,请尝试添加!important值或确保您的样式没有被其他东西覆盖。

回答by Mo.

I found the solution for you

我为你找到了解决方案

you should specify element width

你应该指定元素宽度

input {
  display: block;
  width: 60px;
  margin: 10px auto;
  padding: 3px;
}

回答by Supr

You want the three forms together to be aligned in the center? Wrap them in a single div and center that div instead.

您希望三个表格一起在中心对齐吗?将它们包装在一个 div 中,然后将该 div 居中。

回答by Akash Sinha

in addition to specifying width and display block also check if the float property is set to none.

除了指定宽度和显示块之外,还要检查浮动属性是否设置为无。

回答by Carl Brusell

In addiction to everything, you may check if your body have the parameter position. It may be set to fixed.

对一切上瘾,你可以检查你的身体是否有参数位置。可以设置为固定。

回答by Onwuka Gideon

You have can do something like this:

你可以做这样的事情:

input {
  width: fit-content;
  margin: auto;
}