html – CSS：水平和垂直页面的中心表单_html-js-css

概述如何在我的页面中水平和垂直居中名为form_login的表单？这是我现在使用的HTML： <body> <form id="form_login"> <p> <input type="text" id="username" placeholder="username" /> </p> <p> 如何在我的页面中水平和垂直居中名为form_login的表单？

这是我现在使用的HTML：

<body>    <form ID="form_login">        <p>            <input type="text" ID="username" placeholder="username" />        </p>        <p>            <input type="password" ID="password" placeholder="password" />        </p>        <p>            <input type="text" ID="server" placeholder="server" />        </p>        <p>            <button ID="submitbutton" type="button">Se connecter</button>        </p>    </form></body>

我尝试过以下CSS,但我的表单从不居中：

#form_login {    left: 50%;    top: 50%;    margin-left: -25%;    position: absolute;    margin-top: -25%;}

解决方法如果要进行水平居中,只需将表单放在div标记内并对其应用align =“center”属性即可.因此,即使更改了表单宽度,您的居中也将保持不变.

<div align="center"><form ID="form_login"><!--form content here--></form></div>

UPDATE

@ G-Cyr是对的. align =“center”属性现已过时.您可以使用text-align属性,如下所示.

<div CSS="text-align:center"><form ID="form_login"><!--form content here--></form></div>

这将使父div中的所有内容居中.可选方法是使用margin：自动CSS属性,具有预定义的宽度和高度.请按照以下主题获取更多信息.

How to horizontally center a in another ?

垂直定心比这困难.为此,您可以执行以下 *** 作.

HTML

<body><div ID="parent">    <form ID="form_login">     <!--form content here-->    </form></div></body>

CSS

#parent {   display: table;   wIDth: 100%;}#form_login {   display: table-cell;   text-align: center;   vertical-align: mIDdle;}

总结

以上是内存溢出为你收集整理的html – CSS：水平和垂直页面的中心表单全部内容，希望文章能够帮你解决html – CSS：水平和垂直页面的中心表单所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/web/1109502.html

html – CSS：水平和垂直页面的中心表单

发表评论

评论列表（0条）