How to center text under an input box with label? - html

Question

Sounds easy but say I'm using bootstrap and the input box has a label, when I resize the text underneath is not centered.
Here's some simple html to demo:
<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 associated with the input textbox, the text '(Center under input) should appear under the input box in the middle.
So ideally the (Center under input) text should be glued centrally underneath the input textbox while the label acts normally.
Is this possible? I'm trying with a table (of all things) at the moment but can't get it to behave, I've tried positioning etc. still no luck.
Any help is much appreciated.

Answer 1

If you want to centre things relative to each other, then they should generally 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>
Your example content is too abstract to tell, but your centred content should probably be another label element if it is associated with the input.

Answer 2

You can kill 2 birds with one stone - have an accessible input that is compatible with screen readers, and center your 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>
Notice you don't need the for attribute. It's a clean way to accomplish accessibility. Some simple CSS aligns the text. If you don't want to use inline styles, you could always write another class.