首页 <!DOCTYPE html> <html> <head> <title><CS></title> </head> <body> <h3>Please enter your question.</h3> <form action="/middle" method="post"> <textarea name="text" rows="4" cols="50"></textarea> <br> <input type="submit" value="确定"> <br> </form> </body> </html> 改为居中自适应

<!DOCTYPE html> <html> <head> <title><CS></title> </head> <body> <h3>Please enter your question.</h3> <form action="/middle" method="post"> <textarea name="text" rows="4" cols="50"></textarea> <br> <input type="submit" value="确定"> <br> </form> </body> </html> 改为居中自适应

时间: 2023-08-14 10:53:50 浏览: 184

您可以将以下 CSS 样式添加到 `<head>` 标签中的 `<style>` 标签中，以使表单居中和自适应屏幕大小： ```html <!DOCTYPE html> <html> <head> <title><CS></title> <style> body { display: flex; justify-content: center; align-items: center; height: 100vh; } form { display: flex; flex-direction: column; align-items: center; } textarea { width: 100%; } </style> </head> <body> <h3>Please enter your question.</h3> <form action="/middle" method="post"> <textarea name="text" rows="4" cols="50"></textarea> <br> <input type="submit" value="确定"> <br> </form> </body> </html> ``` 这样，表单将垂直居中显示，并且文本区域的宽度将适应屏幕大小。

阅读全文