如何将表单居中对齐

Question

如何将表单居中对齐

4

我该如何使这个表单居中对齐？我尝试了margin-left:auto;、margin:50px;、margin: 0 auto 0 auto;以及其他几种代码，但似乎没有什么作用。我希望能够将所有内容都居中对齐，并且如果我想添加其他项目，它们也会被居中对齐。

以下是jsfiddle链接：http://jsfiddle.net/ffKKN/1/ 以下是CSS代码：

.radio div[type='radio'] {
background: transparent;


border:0px solid #dcdcdc;
border-radius:10px;
padding:0px;
float:left;
margin-left: 10px;
cursor:pointer;
}
.radio div.active {
box-shadow:0 0 2px 0px transparent inset;
}
.tablebuttons img {
width: 60px;
height: 55px;
border: 0px solid #666;
background: #fff;
display:block;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px; 
}
.question {
margin-left: auto;
display: none;
clear: both;
}
.question:nth-child(1) {
display:block;
}

#linkDiv {
margin: 0;
}
.clear {
clear: both;
}

- user2680614

5

表单的宽度当前为“自适应”，因此它正在扩展以填充其容器-即<body>- 您需要指定一个固定的宽度，然后使用margin: 0 auto;来使其居中。 - Adrift

5个回答

3

Set a width, then use margin:0px auto;

#quiz {
    width: 320px;
    margin: 0px auto;
}

此外，如果您希望文本在容器内居中显示，请使用以下代码：

需要居中的文本

body {
    text-align: center;
}

jsFiddle示例

- Josh Crozier

正文宽度？我不明白。此外，表单的宽度不应该是流体的吗？ - Ruan Mendes

@JuanMendes，楼主提出了一个问题，我给出了一个答案。当然，如果你认为这很重要，你可以采取流畅的方式来回答。 - Josh Crozier

仅仅因为我提到了你的方法的缺点，并不意味着我会花时间去寻找或者知道更好的方法。我只是想确保清楚地表明这种技术仅适用于具有固定宽度的元素。 - Ruan Mendes

1

在你的CSS中添加这行代码:

#quiz { margin:0 auto; width:350px; }

- Charaf JRA

1

如果您将用作单选按钮替代的 <div class="iphone3gscarrier"> 更改为 <span> 标签，并使用以下 CSS：

body {
text-align: center;
}

现在它们已经居中了。您可以添加尽可能多的标签，所有内容都将保持居中。

http://jsfiddle.net/ZBMgZ/

- kisabelle

span和div有什么区别？ - user2680614

1

@user2680614 span是内联的，可以通过.iphone{display: inline}来实现。 - Ruan Mendes

1

如果你能使用flexbox布局，那么这是居中元素的唯一方式，而不需要使用表格、文本对齐或固定宽度。

http://jsfiddle.net/tuu4y/

HTML

<form>
    <label>Hello <input /> </label>    
</form>

CSS

form {
    display: inline block;
   /* flexbox, por favor */
   display: -webkit-box;
   -webkit-box-orient: horizontal;
   -webkit-box-pack: center;
   -webkit-box-align: center;

  display: -moz-box;
  -moz-box-orient: horizontal;
  -moz-box-pack: center;
  -moz-box-align: center;

  display: box;
  box-orient: horizontal;
  box-pack: center;
  box-align: center;    
}

如果您需要支持旧浏览器，并且可以硬编码宽度http://jsfiddle.net/tuu4y/4/

form {
    width: 300px;
    margin: 5px auto;   
}

如果您无法硬编码宽度，可以使用以下三种技巧之一，其中一些不符合验证要求，而另一些则被避免使用。它们都需要使表单变为inline-block。

在包装容器中使用text-align:center

如果您不希望文本居中对齐，则必须在表单本身上放置text-align:lefthttp://jsfiddle.net/tuu4y/2/。

body {
    text-align: center;
}
form {
    display: inline-block;   
    text-align: left;
}

在包装器中放置`<form align="center">...</form>`，

不过并不验证 http://jsfiddle.net/tuu4y/1/

<form align="center">
    <label>Hello <input /> </label>    
</form>

- Ruan Mendes

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Itay · Accepted Answer

问题在于表单具有块级显示，并且会铺满其容器的100％宽度。您可以将显示切换为“内联块”，这样它就会根据表单的子元素进行展开。

无需固定宽度。

body {
    text-align: center;
}
#quiz {
    overflow: hidden;
    display: inline-block;
}

jsFiddle Demo

如何将表单居中对齐

HTML

CSS

在包装容器中使用text-align:center

在包装器中放置<form align="center">...</form>，

在包装器中放置`<form align="center">...</form>`，