How to center text under input field with label?

Question

It sounds simple, but I will say that I am using bootstrap, and the input field has a label, when I resize the text below it, it is not centered.

Here are some simple html to demonstrate:

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

The label should be connected to the text input field, the text "(under the central approach) should appear under the input field in the middle.

Ideally, the text (Center under input) should be glued centrally under the input text box, while the shortcut works fine.

Is it possible? I am trying with a table (of all things) at the moment, but I can not make it behave, I tried positioning, etc. Still no luck.

Any help is greatly appreciated.

Answer 1

If you want to center things relative to each other, they should usually be placed in a container.

 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> 

The content of your example is too abstract to tell, but your centered content should probably be another label element if it is connected to the input.

Answer 2

You can kill 2 birds with one stone - have an accessible input compatible with screen readers and center the text using this markup structure:

 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> 

Please note: you do not need the for attribute. This is a clean way to achieve accessibility. Some simple CSS align text. If you do not want to use inline styles, you can always write another class.