php - 使用 codeigniter 时如何在字段集中居中输入标签？

Question

我使用 Codeigniter 创建了一个注册页面，我想将所有元素集中在一个字段集中。

这是我的 PHP 代码:

<fieldset style="text-align:center">
<legend>Data</legend>

<?php
$this->load->helper('form');

echo form_open('login/create_user');
echo form_input('username', '', 'placeholder="Username"');
echo form_input('email', '', 'placeholder="Email"');
echo form_password('password', '', 'placeholder="Password"');
echo form_password('password1', '', 'placeholder="Confirm"');

echo form_submit('submit', 'Submit');
echo validation_errors();
?>
</fieldset>

CSS 代码:

input[name=username], input[name=email], input[type=password]
{
display: block;
margin: 0 0 1em 0;
width: 200px;
border: 5px;
-moz-border-radius: 1px;
-webkit-border-radius: 1px;
padding: 1em;
}

input[name=submit]
{
border: none;
margin-right: 1em;
padding: 6px;
font-size: 12px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
background: #088A08;
color: white;
box-shadow: 0 1px 0 white;
-moz-box-shadow: 0 1px 0 white;
-webkit-box-shadow: 0 1px 0 white;
}

这是它的样子:Page , 如您所见，只有提交按钮居中，为什么会这样？

Answer 1

input[name=username], input[name=email], input[type=password]
{
display: block;
margin: 0 auto 1em; /* change here */
width: 200px;
border: 5px;
-moz-border-radius: 1px;
-webkit-border-radius: 1px;
padding: 1em;
}

您始终可以使用宽度和 margin-right: auto, margin-left: auto 将 display:block 居中；