如何将输入表单与页面中心对齐答案

【问题标题】：How to align input forms to the center of the page如何将输入表单与页面中心对齐
【发布时间】：2013-12-08 16:17:44
【问题描述】：

我已尽一切努力使我的输入表单位于页面中心。

这就是我的代码的样子：

<!DOCTYPE html>
<html>
<head>
<title>Pizza Order</title>
<style>

.container {
    width: 500px;
    clear: both;
    margin-right:50%;
}

input {
    width: 100%;
    clear: both;
}

    .what {
        font-size:35px;

}
</style>
<body>
<div class="container">
<form>
<p>Name<input type="text" name="name"></p>

<p>Last Name<input type="text" name="lastname"></p>
<br>
<p class="what">Pick your crust:</p>

<input type="checkbox">Thick
<input type="checkbox">Thin
<input type="checkbox">Cheesy
</form>
</div>
</body>
</html>

有什么想法吗？

（在我有更多详细信息之前不会让我发布：DFKJSDFKLJD:FLKJDFLJDFKJDSFLKDSJF:DLSKFJ;laksjflkdjdetailsdetailsdetailsDETAILS）

【问题讨论】：

所以您希望整个表单居中？还是只是输入？

标签： html input alignment

【解决方案1】：

您并不清楚您实际上试图“居中”什么。这会将您的表单置于页面中间并对齐您的输入字段。

<!DOCTYPE html>
<html>
<head>
    <title>Pizza Order</title>
    <style>

        #container {
            width: 100%;
            clear: both;
        }
        #content {
            margin: auto;
            position:relative;
            width:500px;
        }
        .what {
            font-size:35px;
        }
        label {
            width: 150px;
            float: left;
        }
    </style>
<body>
<div id="container">
    <div id="content">
    <form>
        <label for="name">Name</label><input type="text" id="name" name="name"><br />
        <label for="lastname">Last Name</label><input type="text" id="lastname" name="lastname">
        <br>
        <p class="what">Pick your crust:</p>

        <input type="checkbox">Thick
        <input type="checkbox">Thin
        <input type="checkbox">Cheesy
    </form>
    </div>
</div>
</body>
</html>

【讨论】：

对不起，我的意思是
另外我正在尝试将输入/所有内容居中。