如何使表格水平和垂直居中？

发布于 2024-09-25 23:11:55 字数 332 浏览 3 评论 0原文

我的身体中有一个形式。我正在尝试替换屏幕中间/中心的表单。 CSS 有没有正确的方法来做到这一点？

-----------------------
-                     -
-                     -
-                     -
-          M          -
-                     -
-                     -
-                     -
-----------------------

原文

I have a form within the body. And I'm trying to replace the form at the middle/center of the screen. Is there a proper way to do that in CSS?

-----------------------
-                     -
-                     -
-                     -
-          M          -
-                     -
-                     -
-                     -
-----------------------

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

三生一梦 2024-10-02 23:11:55

编辑：（剪掉之前的代码，它只水平对齐）

因为没有其他人回复垂直对齐...这是一个选项。如果表单只是位于正文中，则不需要包装纸等。基本解决方案（需要固定高度）：

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html>
 <head>
     <title>Vertical/Horizontal Align</title>
     <style type="text/css">
         form {
             height:400px;
             width:400px;
             position: absolute;
             left: 50%;
             top: 50%;
             background-color:#CCC;
             /* Set margins to offset 50% of the w/h */
             margin: -200px 0 0 -200px;
         }
     </style>
 </head>
 <body>
     <form action="/something">
         <p>
          <label>NAME: </label> <input type="text" name="Name" />
         </p>
         <p>
         <label>PHONE: </label> <input type="text" name="Phone" />
         </p>
     </form>
 </body>
 </html>

背景颜色只是为了说明宽度/高度。

Edit: (snipped previous code, it only horizontally aligned)

Since no one else got back about vertical align... Here's one option. If the form is just sitting in the body, you don't want a wrapper, etc.. Basic solution (requires a fixed height):

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html>
 <head>
     <title>Vertical/Horizontal Align</title>
     <style type="text/css">
         form {
             height:400px;
             width:400px;
             position: absolute;
             left: 50%;
             top: 50%;
             background-color:#CCC;
             /* Set margins to offset 50% of the w/h */
             margin: -200px 0 0 -200px;
         }
     </style>
 </head>
 <body>
     <form action="/something">
         <p>
          <label>NAME: </label> <input type="text" name="Name" />
         </p>
         <p>
         <label>PHONE: </label> <input type="text" name="Phone" />
         </p>
     </form>
 </body>
 </html>

Background color is just to illustrate the width/height..

回复收藏 0 原文

赢得她心 2024-10-02 23:11:55

声明表单的宽度属性并使用自动左边距，例如：

form{
   width: 50%;
   margin: 0 auto;
}

Declare a width property for your form and use auto left margin, say:

form{
   width: 50%;
   margin: 0 auto;
}

回复收藏 0 原文

~没有更多了~

关于作者

遥远的绿洲

暂无简介

0 文章

0 评论

23 人气

关注发私信

留蓝

文章 0 评论 0

关注

18790681156

文章 0 评论 0

关注

zach7772

文章 0 评论 0

关注

Wini

文章 0 评论 0

关注

ayeshaaroy

文章 0 评论 0

关注

初雪

文章 0 评论 0

友情链接

文江博客

如何使表格水平和垂直居中？

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（2）

关于作者

相关话题

热门标签

推荐作者

留蓝

18790681156

zach7772

Wini

ayeshaaroy

初雪

友情链接

如何使表格水平和垂直居中？

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（2）

关于作者

相关话题

热门标签

推荐作者

留蓝

18790681156

zach7772

Wini

ayeshaaroy

初雪

友情链接

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。