首页html表单居中对齐

html表单居中对齐

时间: 2024-01-25 18:11:16 浏览: 125

以下是两种HTML表单居中对齐的方法： 1.使用CSS的margin属性将表单居中对齐： ```html DOCTYPE html> <html> <head> <title>居中对齐表单</title> <style> form { margin: 0 auto; width: 50%; background-color: #ddd; padding: 20px; } </style> </head> <body> <form> <label for="name">姓名：</label> <input type="text" id="name" name="name"><br><br> <label for="email">邮箱：</label> <input type="email" id="email" name="email"><br><br> <input type="submit" value="提交"> </form> </body> </html> ``` 2.使用HTML的table标签将表单居中对齐： ```html <!DOCTYPE html> <html> <head> <title>居中对齐表单</title> <style> table { margin: 0 auto; background-color: #ddd; padding: 20px; } </style> </head> <body> <table> <form> <tr> <td><label for="name">姓名：</label></td> <td><input type="text" id="name" name="name"></td> </tr> <tr> <td><label for="email">邮箱：</label></td> <td><input type="email" id="email" name="email"></td> </tr> <tr> <td colspan="2"><input type="submit" value="提交"></td> </tr> </form> </table> </body> </html> ```

阅读全文