什么是将相对的表格居中的最佳方式，浮动内部的输入包含图像

I'm making a form which has little images in them that is either a tick or cross. I want these to appear that they are in the text box so to do this I have added it to the form. This site is a mobile site so I want the form to be centered on what ever sized screen and the images to always be in the same place. My method at the moment feels quite messy and works on small screens unless I actually look at in on the phone then its a mess! So whats the best way to do this? Here was my stab at 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 For Us"> Work For 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!

1 个解决方案

#1

this is the best way to put your div at the center:

这是将div放在中心的最佳方式:

#your_div {margin:0 auto;}

but if you want that your div be exactly center horizontally and vertically , you should do this:

但是如果你想让你的div完全水平和垂直居中,你应该这样做:

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

#1