Question

我已尝试将所有输入表单放到页面中心。

这是我的代码有点像：

<!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）

Answer 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>

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

1 个答案: