html - 如何在 html/css 中将表单居中对齐

标签 html css

我是 html/css 的新手。我正在尝试建立自己的表格,并试图将其对齐在中心。我在 css 中使用了 align 属性,但它不起作用。

HTML代码:

<!DOCTYPE HTML>
<head>
    <title>Web Page Having A Form</title>
    <link rel = "stylesheet" type="text/css" href="Form.css">
</head>
<body>
    <h1>Create a New Account</h1>
      <form >
       <table>
        <tr>
         <td>Name :</td> <td><input type="text" name="name"></td><br>
        </tr>
        <tr>
         <td>Email :</td> <td><input type="text" name="email"></td><br>
        </tr>
        <tr>
         <td>Password :</td> <td><input type="password" name="pwd"></td><br>
        </tr>
        <tr>
         <td>Confirm Password :</td> <td><input type="password" name="cpwd"><br>
        </tr>
        <tr>
         <td><input type="submit" value="Submit"></td>
        </tr>
       </table>
      </form>
</body>

CSS 代码:

    body
{
    background-color : #484848;
}
h1
{
    color : #000000;
    text-align : center;
    font-family: "SIMPSON";
}
form
{
    align:"center";
}

我应该如何更改我的代码以使整个表单居中对齐?

最佳答案

像这样

demo

CSS

    body {
    background-color : #484848;
    margin: 0;
    padding: 0;
}
h1 {
    color : #000000;
    text-align : center;
    font-family: "SIMPSON";
}
form {
    width: 300px;
    margin: 0 auto;
}

关于html - 如何在 html/css 中将表单居中对齐,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19089018/

相关文章:

html - 清除缓存,Chrome 不会停止使用旧的 CSS

html - 检测特定字体并将其应用于大写字母 css

html - 为什么可以使用 CSS 而不是属性来设置一些 HTML 元素的样式

html - 元素之间的边距

html - 如何阻止文本在图像左侧下方移动?

javascript - 滚动页面然后在某个位置滚动元素

javascript - 如何在 css 中悬停时更改光标大小

html - CSS 边框图像仅适用于顶部和底部

html - 如何防止 <hr> 在两个 div 之间创建空间?

javascript - 无法使用 :not() 将按钮定位为分离行为