Как центрировать текст под полем ввода с меткой?

Question

Звучит просто, но скажу, что я использую бутстрап, а поле ввода имеет метку, когда я изменяю размер текста внизу, не центрируется.

Вот некоторые простые HTML для демо:

<form action="http://google.com"> 
     <div> 
      <label for="inputBox">Email address</label> 
      <input name="email" type="text" id="inputBox"/> 
      <br> 
      (Center under input) 
     </div> 
    </form> 

Этикетка должна быть связана с входным текстовым полем, текстом «(Центр при входе) должны появиться под полем ввода в середине.

В идеале, текст (центр под вход) должен быть приклеен централизованно под текстовым полем ввода, в то время как ярлык действует нормально.

Возможно ли это? Я пытаюсь со столом (всего того) в данный момент, но не могу заставить его вести себя, я пробовал позиционирование и т. Д., Все равно не повезло.

Любая помощь очень ценится.

Answer 1

Если вы хотите центрировать предметы относительно друг друга, их обычно следует помещать в контейнер.

div, 
 
label { 
 
    display: inline-block; 
 
    vertical-align: top; 
 
} 
 
div { 
 
    text-align: center; 
 
}

<form action="http://google.com"> 
 
    <div> 
 
    <label for="inputBox">Email address</label> 
 

 
    <div> 
 
     <input name="email" type="text" id="inputBox" /> 
 
     <br>(Center under input) 
 
    </div> 
 
    </div> 
 
</form>

Вашего пример содержание слишком абстрактно, чтобы сказать, но ваше отцентрированное содержание должно, вероятно, будет еще один элемент этикетки, если он связан с входом.

Answer 2

Вы можете убить 2 зайцев - есть доступный вход, который совместим с программами чтения с экрана, и центрирования текста, используя эту структуру разметки:

label { 
 
    max-width:300px; 
 
    display:block; 
 
} 
 

 
label span { 
 
    text-align:left; 
 
    display:block; 
 
} 
 
label input { 
 
    width:100%; 
 
}

<form action="http://google.com"> 
 
    <label> 
 
     <span>Email address</span> 
 
     <input name="email" type="text" id="inputBox"/> 
 
     <span style="text-align:center">center me</span> 
 
    </label> 
 
</form>

Примечание Вы не Не нужен атрибут for. Это чистый способ достичь доступности. Некоторые простые CSS выравнивают текст. Если вы не хотите использовать встроенные стили, вы всегда можете написать другой класс.