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

Asked

Viewed 311 times

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’t I center the form in the DIV? what’s wrong? solution?

html css alignment

  • Because it occupies the whole width of the div.

  • If I remove or change the width of . Crate-box, it also does not position..

1 answer

2


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

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

She should be like this:

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

See in Snippet how it was changed

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>

  • Valew - Helped a lot

Browser other questions tagged html css alignment

You are not signed in. Login or sign up in order to post.