html - Positioning form elements and their labels in row -

how position input form elements labels not using table? labels should centered above input elements , blocks in row should centered within outer block.

+----------------------------------------------+ |       label1       label2       label3       | |    [..........] [..........] [..........]    | +----------------------------------------------+ 

there 1, 2, 3 or more elements in same row.

i tried this:

    .outer{text-align:center;}      .inner{float:left;}

    <form>        <div class="outer">          <div class="inner">            <label for="l1">label1</label><br><input id="l1" name="label1">          </div>          <div class="inner">            <label for="l2">label2</label><br><input id="l2" name="label2">          </div>          <div class="inner">            <label for="l3">label3</label><br><input id="l3" name="label3">          </div>        </div>      </form>  

place them in same div, , center text in div:

.wrapper {    text-align:center;  }    .wrapper * {    text-align:left;  }    .okay {    display:inline-block;  }    .okay p {    text-align:center;  }

<div class="wrapper">   <div class="okay">    <p>text</p>    <input type='text'>   </div>   <div class="okay">    <p>text</p>    <input type='text'>   </div>   <div class="okay">    <p>text</p>    <input type='text'>   </div>  </div>