How to center text under an input box with label?

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.