Question

我正在构建一个用于注册用户的表单。

其实我在使用css时遇到了麻烦，我想把一个孩子div放在父div中，但没有成功。

我尝试了不同的方法，我在这里阅读了很多，但似乎其他解决方案并不适合我。

我不想使用text-align: center;，因为我不想要一个居中的文字，只需将文字选为一个块并将其居中。它必须是响应式的，我已经尝试过了，但我不喜欢它在我的浏览器上的样子。

CSS＆amp; HMTL：

＆＃13;

/* ---===### REGISTER PAGE ###===--- */
.registerPage1{
	width:100%;
   	height: auto;
}
.registerPage2{
	
}
.registerPage1 ul{
	list-style: none;
}
div#regMailError{
	display: none;
	color: red;	
}
div#regPLenError{
	display: none;
	color: red;	
}
div#regPMatchError{
	display: none;
	color: red;	
}
div#regCondError{
	display: none;
	color: red;	
}

＆＃13;

<section class="registerPage1">
	<section class="registerPage2">
		<form method="post" action="#" onsubmit="" id="regTopfit" name="regTopfit">
			<ul>
				<li>Nombre:</li>
				<li><input type="text" name="nombre" placeholder="Nombre"><input type="text" name="lastname" placeholder="Apellidos"></li>
				<li><input type="email" name="email" placeholder="Dirección de e-mail"></li>
				<li><div id="regMailError">Debes introducir una dirección de correo electrónico válida.</div></li>
				<li>Crear contraseña:</li>
				<li><input type="password" name="pass1" placeholder="6-20 caracteres" ></li>
				<li><div id="regPLenError">Debes introducir una dirección de correo electrónico válida.</div></li>
				<li><input type="password" name="pass2" placeholder="Repite la contraseña" ></li>
				<li><div id="regPMatchError">Debes introducir una dirección de correo electrónico válida.</div></li>
				<li><input type="checkbox" name="offers" value="Yes">Quiero recibir las últimas novedades de <a href="#">TopFIT</a></li>
				<li><input type="checkbox" name="conditions" value="accepted" >He leído y acepto la <a href="#">política de privacidad</a>.</li>
				<li><div id="regCondError">Debes introducir una dirección de correo electrónico válida.</div></li>
				<li><input type="submit" value="Crea tu cuenta"></li>
			</ul>
		</form>
	</section>
</section>

＆＃13;

由于

Answer 1

为子div设置max-width，margin-left和margin-right为auto。当视口超出max-width时，子div将在父div中居中。（假设您只想要水平居中）

将以下CSS声明添加到.registerPage2：

.registerPage2 {
    max-width: 350px; // Set your custom max-width value
    margin-left: auto;
    margin-right: auto;
}

以下是演示：http://jsfiddle.net/jonsuh/vjsnrp4h/

Answer 2

默认情况下，第二个div占100％。它居中但仍然没有保证金的地方，因为100％的宽度。

/* ---===### REGISTER PAGE ###===--- */
.registerPage1{
	width:800px;
   	height: auto;
    background-color : red;
}
.registerPage2{
	width:600px;
    margin:auto;
    background-color : pink;
}
.registerPage1 ul{
	list-style: none;
}
div#regMailError{
	display: none;
	color: red;	
}
div#regPLenError{
	display: none;
	color: red;	
}
div#regPMatchError{
	display: none;
	color: red;	
}
div#regCondError{
	display: none;
	color: red;	
}

<section class="registerPage1">
	<section class="registerPage2">
		<form method="post" action="#" onsubmit="" id="regTopfit" name="regTopfit">
			<ul>
				<li>Nombre:</li>
				<li><input type="text" name="nombre" placeholder="Nombre"><input type="text" name="lastname" placeholder="Apellidos"></li>
				<li><input type="email" name="email" placeholder="Dirección de e-mail"></li>
				<li><div id="regMailError">Debes introducir una dirección de correo electrónico válida.</div></li>
				<li>Crear contraseña:</li>
				<li><input type="password" name="pass1" placeholder="6-20 caracteres" ></li>
				<li><div id="regPLenError">Debes introducir una dirección de correo electrónico válida.</div></li>
				<li><input type="password" name="pass2" placeholder="Repite la contraseña" ></li>
				<li><div id="regPMatchError">Debes introducir una dirección de correo electrónico válida.</div></li>
				<li><input type="checkbox" name="offers" value="Yes">Quiero recibir las últimas novedades de <a href="#">TopFIT</a></li>
				<li><input type="checkbox" name="conditions" value="accepted" >He leído y acepto la <a href="#">política de privacidad</a>.</li>
				<li><div id="regCondError">Debes introducir una dirección de correo electrónico válida.</div></li>
				<li><input type="submit" value="Crea tu cuenta"></li>
			</ul>
		</form>
	</section>
</section>

Answer 3

怎么样：

.child-div {margin：0 auto; }

.parent-div {line-height：EQUAL TO DIV HEIGHT}

你将获得垂直和水平对齐。

将文本居中作为div内的块

3 个答案: