Question

表格和按钮位于屏幕的左侧，我如何将它们放在中心？如果我不包括“display：inline;”表单位于页面中间，但只要我将其包含在内，表单就会显示在屏幕的左侧。

HTML

<div class="rounded">
<FORM name="myForm" method="POST" action=""; onsubmit="validate();">
<input type="text" value="Start time">  
<input type="submit" value="Save">
</form>
<button type="submit" onclick="validate1();" >Cancel</button>
</div>

CSS

rounded{
text-align:center;
align:center;
}

form {
margin:0 auto; 
text-align:center;
align:center;
display: inline;
}

Answer 1

rounded匹配<rounded>元素，但您的容器是<div> class="rounded"。

使用.rounded匹配舍入类成员的元素。

Answer 2

尝试在圆形框的css中添加宽度和边距，如下所示：

.rounded {
    width: auto;
    margin: 0 auto;
    text-align: center;
    /* align: center; - Remove this */
}

这对我的代码测试起了作用。

Answer 3

尝试

.rounded
{
    text-align:center;
    align:center;
}

Answer 4

请查看此fiddle和css。

.rounded{
text-align:center;
}

form {
margin:0 auto; 
text-align:center;
display: inline-block;
}

您还需要在表单中保留按钮

<div class="rounded">
    <FORM name="myForm" method="POST" action=""; onsubmit="validate();">
        <input type="text" value="Start time">  
        <input type="submit" value="Save">
        <button type="submit" onclick="validate1();" >Cancel</button>
    </form>
</div>

为什么我的html表单和按钮在使用display后不居中：inline;

4 个答案: