How to position the form in the center of a DIV?

Question

How to position the form in the center of a DIV?

Navigation

#1 by (3 votes)

1

body{
	background: #EFEFEF;
	font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, "sans-serif;
}
.create-box{
	background: #DF5B5D;
	border: 10px dashed #FEFEFE;
	max-width: 550px;
	min-height: 88px;
	text-align: center;
	margin: auto;
}
.create-box form{
	width: 100%;
	text-align: center;
	margin: 0 auto;
}
.create-box form input{
	display: block;
	margin: 5px 10px;
	vertical-align: middle;
	text-align: center;
	font-size: 22px;
	font-weight: bold;
	color: #43A8C7;
}

<!DOCTYPE html>
<html>
	<head>
		<title>Trash [coder]</title>
		<meta charset="utf-8" />
	</head>
	<body>
		<div class="create-box">
			<form>
				<input type="text" id="titulo" placeholder="Digite o título" />
				<input type="text" id="conteudo" placeholder="Digite o conteúdo" />
				<input type="submit" value="Criar Boxer's" />
			</form>
		</div>
	</body>
</html>

Why can not I centralize the form in the DIV? what's wrong? solution?

html css alinhamento

asked by anonymous 06.03.2018 / 22:54

1 answer

Compare if two date fields are the same in C # Scroll according to clicked element

score 3 · Accepted Answer

From what I understand of your question, your problem is with this margin.

.create-box form input { margin: 5px 10px;}

It should look like this:

.create-box form input { margin: 5px auto;}

See in Snippet how you got the change

body{
	background: #EFEFEF;
	font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, "sans-serif;
}
.create-box{
	background: #DF5B5D;
	border: 10px dashed #FEFEFE;
	max-width: 550px;
	min-height: 88px;
	text-align: center;
	margin: auto;
}
.create-box form{
	width: 100%;
	text-align: center;
	margin: 0 auto;
}
.create-box form input{
	display: block;
	margin: 5px auto;
	vertical-align: middle;
	text-align: center;
	font-size: 22px;
	font-weight: bold;
	color: #43A8C7;
}

<div class="create-box">
    <form>
        <input type="text" id="titulo" placeholder="Digite o título" />
        <input type="text" id="conteudo" placeholder="Digite o conteúdo" />
        <input type="submit" value="Criar Boxer's" />
    </form>
</div>