центр только один элемент в DIV

Question

У меня есть этот HTML код:

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

Я сконфигурированный «выравнивания текста: центр» на DIV, но, к сожалению, span текст также по центру (см рисунок ниже) , Мне нужно span быть рядом с ним, а не по центру.

Answer 1

Вы, вероятно, должен центрирования родительский элемент, а не div в форме:

.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>

Или, если вы хотите span не влияет на форму позиции используйте 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

Вы должны применить 'выравнивания текста: центр;' на входе # cemail, а не на div.

Answer 3

насчет красивого -

position: absolute 

• Вы получаете бесплатно по сравнению с делами. Тогда ошибка никогда не будет мешать коробке ввода, поскольку она абсолютно позиционируется.

Конечно, вам нужно будет исправить верхнюю, левую, правую, нижнюю, чтобы соответствовать вашему дизайну.

Answer 4

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

Answer 5

Вы также можете сделать что-то подобное, чтобы разрешить обертывание текста.

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>