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;
}
4

5 回答 5

6

问题是表单有block显示，并扩展到其容器的 100% 宽度。您可以将显示切换到inline-block，因此它将根据表单的子项进行传播。

无需固定宽度。

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

jsFiddle 演示

于 2013-09-06T20:11:45.870 回答
3

设置宽度，然后使用margin:0px auto;

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

此外，如果您希望文本在容器内居中，请使用

body {
    text-align: center;
}

jsFiddle 示例

于 2013-09-06T20:10:56.327 回答
1

在你的 CSS 中添加这一行：

#quiz { margin:0 auto; width:350px; }
于 2013-09-06T20:13:43.207 回答
1

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

body {
text-align: center;
}

他们现在居中。您可以添加任意数量的标签，所有内容都将保持居中。

http://jsfiddle.net/ZBMgZ/

于 2013-09-06T20:38:46.643 回答
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

If you don't want the text to be center aligned, you have to put text-align:left on the form itself http://jsfiddle.net/tuu4y/2/

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

Put a wrapper <form align="center">...</form>,

Doesn't validate though http://jsfiddle.net/tuu4y/1/

<form align="center">
    <label>Hello <input /> </label>    
</form>
于 2013-09-06T20:57:30.997 回答