在div中仅将一个元素居中

Question

I have this HTML code:

    <div>
        <input id="cemail" type="email" name="email" placeholder="Your E-Mail" required>                    
        <span>Proper format "exampel@something.com"</span>
    </div>

I've configured 'text-align: center' on the div but unfortunately span text is also centered (see the image below). I need span to be near it and not centered.

Answer 1

You probably should center your parent element, and not div inside form:

 .center-form { text-align: center; } .center-form form { display: inline-block; text-align: left; } 

 <div class="center-form"> <form action=""> <div> <input id="cemail" type="email" name="email" placeholder="Your E-Mail" required> </div> <div> <input id="cemail" type="email" name="email" placeholder="Your E-Mail" required> <span>Proper format "exampel@something.com"</span> </div> <div> <input id="cemail" type="email" name="email" placeholder="Your E-Mail" required> </div> <button>Submit</button> </form> </div> 

Or if you want span not to affect form position, use position: absolute :

 .center-form { text-align: center; } .center-form form { display: inline-block; text-align: left; } .center-form form div { position: relative; } .center-form form div span { position: absolute; left: 100%; top: 0; /* for demo */ white-space: nowrap; } 

 <div class="center-form"> <form action=""> <div> <input id="cemail" type="email" name="email" placeholder="Your E-Mail" required> </div> <div> <input id="cemail" type="email" name="email" placeholder="Your E-Mail" required> <span>Proper format "exampel@something.com"</span> </div> <div> <input id="cemail" type="email" name="email" placeholder="Your E-Mail" required> </div> <button>Submit</button> </form> </div> 

Answer 2

You should apply 'text-align: center;' on the input#cemail, not on the div.

Answer 3

What about a nice -

position: absolute

• You get a free relative with the div. Then the error will never get in the way of the input box as its absolutely positioned.

Of course you will need to fix the top, left, right, bottom to conform to your design.

Answer 4

You can also do something like this, to allow wrapping of text.

 body { font-family: sans-serif; } input { width: 160px; position: relative; left: 50%; margin-left: -80px; box-sizing: border-box; } p { clear: right; } .legend { float: right; width: 50%; } .legend small { background: #ccc; display: block; margin-left: 80px; word-wrap: break-word; padding: 0.5em; } 

 <form> <p> <input type="text" placeholder="Your Last Name"> <span class="legend"> <small>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam consectetur libero magna, ultrices vehicula dui hendrerit ut. Mauris dictum urna nec justo tristique, id rutrum sapien blandit. Ut pellentesque, augue ornare pellentesque dictum, sem lectus hendrerit massa, nec gravida elit mauris sit amet lorem.</small> </span> </p> <p> <input type="text" placeholder="Your User Name"> </p> <p> <input type="email" placeholder="Your Email"> <span class="legend"> <small>Proper format "exampel@something.com"</small> </span> </p> <p> <input type="text" placeholder="Your Password"> </p> <p> <input type="submit" value="Add Me Now"> </p> </form> 

Answer 5

  <div>
     <input id="cemail" type="email" name="email" placeholder="Your E-Mail" required>                    
     <span class="float-right">Proper format "exampel@something.com"</span>
  </div>