html - Whats the best way to center a form that's relative, the inputs inside float left and contains images -

html - Whats the best way to center a form that's relative, the inputs inside float left and contains images -

i'm making form has little images in them either tick or cross. want these appear in text box have added form. site mobile site want form centered on ever sized screen , images in same place. method @ moment feels quite messy , works on little screens unless @ in on phone mess! whats best way this? here stab @ it

html <div class="formcontainer"> <form action="contact.php" method="post" class="ajax" id="contactform"> <div class="input"> <input type="text" name="text" placeholder="name" id="name"> <div class="validation"> <img src="check.svg" class="imagevalidation" id="nameimage"> </div> </div> <div class="input"> <input type="text" name="email" placeholder="email" id="email"> <div class="validation"> <img src="check.svg" class="imagevalidation" id="emailimage"> </div> </div> <div class="input"> <select name="subject" id ="subject"> <option value="1">subject</option> <option value="private hire">private hire</option> <option value="lost items">lost items</option> <option value="work us"> work us</option> <option value="other">other</option> </select> <div class="validation"> <img src="check.svg" class="imagevalidation" id="subjectimage"> </div> </div> <div class="input" id="message"> <textarea name="message" placeholder="your message"></textarea> <div class="validation"> <img src="check.svg" class="imagevalidation" id="messageimage"> </div> </div> <input name="robotest" type="text" id="robotest"> <div class="input"> <input type="submit" value="submit"> </div> </form> <p id="emailconfrimation"> email sent </p> </div>

the css:

.formcontainer{ height: 90%; width: 80%; margin: 0 auto; } form{ width: 100%; height: 100%; text-align: center; } .input{ width: 100%; height: 10%; margin-top: 5%; } input{ float: left; width: 99.9%; height: 100%; text-indent: 8%; background-color: #dedede; font-family: 'source sans pro', sans-serif; color: #3a3a3a; font-size: 1em; border: none; -webkit-border-radius:0; border-radius:0; } select{ float: left; width: 99.9%; height: 100%; text-indent: 8%; background-color: #dedede; font-family: 'source sans pro', sans-serif; color: #3a3a3a; font-size: 1em; border: none; -webkit-border-radius:0; border-radius:0; } textarea{ float: left; width: 98%; height: 100%; text-indent: 8%; background-color: #dedede; font-family: 'source sans pro', sans-serif; color: #3a3a3a; font-size: 1em; border: none; -webkit-border-radius:0; border-radius:0; resize:none; } input[type='submit']{ margin: 0 auto; display: block; width: 100%; height: 100%; background-color: #bf3737; -webkit-appearance: none; -moz-appearance: none; appearance: none; -webkit-border-radius:0; border-radius:0; border: none; color: #ffffff; font-family: 'source sans pro', sans-serif; font-size: 1.5em; } .validation{ float: left; width: 0.01%; position: relative; right: 20%; top: 0.5em; }

thanks!

this best way set div @ center:

#your_div {margin:0 auto;}

but if want div center horizontally , vertically , should this:

#main_div {position:relative} #main_div #your_div { position:absolute; top:50%; margin-top:-50px; */half of div height*/ right:50%; margin-right:-70px; */half of div width*/ }

html css forms