html - 为什么我的 html 表单和按钮在使用显示 : inline; 后没有居中

Question

表单和按钮在屏幕的左侧，如何将它们放在中间？如果我不包括“显示:内联；”该表单位于页面中间，但只要我包含它，该表单就会位于屏幕的左侧。

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

检查这个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>