user2501783 user2501783 - 3 months ago 8
HTML Question

Buttons won't align in HTML form

So I have a form here that looks good except that the buttons on the bottom will not center correctly. The end result is supposed to be centered, horiontally-laid out buttons that are slightly spaced out like you would normally see on a form.

The one I made, though, does not center correctly. I'm sure I'm just missing something silly here, but can anyone help correct this?

HTML

<div id="contact_form">
<form name="contact" id="contact" method="post" action="submit_form.php">
<p>Title</p>
<label>
<span>Name: </span><input name="name" id="name" placeholder="Full Name" type="text" autofocus required />
</label>

<label>
<span>Email: </span><input name="email" id="email" placeholder="Email Address" type="email" required />
</label>

<label>
<span>Subject: </span>
<select name="selection">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
<option value="6">Option 6</option>
<option value="7">Option 7</option>
</select>
</label>

<label>
<span>Message: </span><textarea name="message" id="message" placeholder="Your Message" required></textarea>
</label>

<button class="send" type="submit" name="submit" value="submit">Submit</button>
<button class="clear" type="reset" name="clear" value="clear">Reset</button>
</form>
</div>


CSS

#contact_content{
background-color: lightgrey;
margin-left: 1rem;
margin-right: 1rem;
border-radius: 20px 20px 20px 20px;
padding-bottom: 3rem;
padding-top: 1rem;
padding-left: 1rem;
padding-right: 1rem;
}

#contact_content h1{
background-color: black;
border-radius: 20px 20px 20px 20px;
padding: .5rem;
margin-bottom: 2rem;
}

#contact_form p{
text-align: center;
padding: 1rem;
margin-bottom: 2rem;
border-bottom: 1px solid #444;
font-weight: bold;
color: red;
font-size: 1.2rem;
}

#contact_form{
background-color: #555;
border-radius: 10px 10px 10px 10px;
margin-top: 5rem;
padding-bottom: 2rem;
max-width: 600px;
margin: 0 auto;
}

#contact_form label{
display: block;
margin: 0px 0px 5px;
}

textarea:focus, select:focus, input:focus {
border: 2px solid darkblue;
}

#contact_form label>span{
float: left;
color: red;
width: 5rem;
font-weight: bold;
margin-left: 3rem;
}

#contact_form input, #contact_form select, #contact_form textarea{
background-color: #DFDFDF;
height: 25px;
text-indent: 5px;
margin-bottom: 16px;
border-radius: 2px;
width: 65%;
}

#contact_form textarea{
height: 150px;
}

button{
border-radius: 5px 5px 5px 5px;
background-color: black;
color: red;
padding: .5rem;

text-align: center;
margin: 0 auto;
margin-left: 50%;
}


JSFiddle:
https://jsfiddle.net/t1phcxfx/

Answer

Try adding a float to your CSS:

.send {
  display: block;
  float: left;
}

.clear {
  display: block;
}

Updated your Fiddle

You can then add margin or padding to your classes (perhaps the parent class too) and get things centered as you need.