Question

我将表格和按钮与中心对齐有问题，这是我的代码：

<body>
<h1 style="font-family:Comic Sans Ms;text-align:center;font-size:50pt;color:#ff00ba;">
 You need to login :) </h1>     

<form style="font-family:Comic Sans Ms; align:center;">
 Username<br>
<input type="text" name="userid"/><br>
 Password<br>
<input type="password" name="pswrd"/>
<br><br>
<input style="font-family:Comic Sans Ms;" type="button" onclick="check(form)" value="Login"/>
<input style="font-family:Comic Sans Ms;" type="reset" value="Cancel"/>
</form>
........

你可以看到我放了＆＃34; align：center＆＃34;在表单样式，但它不起作用，表单和按钮仍然在网页的左侧，实际上，我尝试div，它工作。但是，如果我不使用div，我只想使用我当前的格式来对齐样式，有没有办法让它居中？干杯

Answer 1

使用text-align：center;

JSFIDDLE

<body>
<h1 style="font-family:Comic Sans Ms;text-align:center;font-size:50pt;color:#ff00ba;">
 You need to login :) </h1>     

<form style="font-family:Comic Sans Ms; text-align: center;">
 Username<br>
<input type="text" name="userid"/><br>
 Password<br>
<input type="password" name="pswrd"/>
<br><br>
<input style="font-family:Comic Sans Ms;" type="button" onclick="check(form)" value="Login"/>
<input style="font-family:Comic Sans Ms;" type="reset" value="Cancel"/>
</form>

Answer 2

CSS＆＃34; align：center;＆＃34;财产是错的。＆＃34; text-align：center; ＆＃34;可能就是你要找的东西。

虽然它被命名为＆＃34; text-align＆＃34;但它会影响内容（不一定是文本）在其应用的元素内的对齐方式。例如，您可以在表单中对齐其他HTML元素或图像：

<form style="width:500px;text-align:center"> <!--This will align the 'input' on the center of the 'form'.-->
    <input type="text" style="text-align:center"> <!--This will align the text to the center of the 'input'.-->
</form>

Answer 3

请尝试以下操作： Demo

<强> CSS：

form, h1{
    clear:both;
    max-width:80%;
    margin:0 auto;
    display:block;
    font-family:Comic Sans Ms;
    text-align:center;
}

如何在HTML / CSS中将表单与中心对齐

3 个答案: