champ Centré avec l'étiquette non centrée

Question

EDIT

Je veux obtenir quelque chose comme ça:

     Title title title title title title 
           ------------ 
           |input text| some text 
           ------------ 

       Title title title title title title title title 
           ------------ 
           |input text| some other text 
           ------------ 

          Title title title title 
           ------------ 
           |input text| some other other text 
           ------------ 

ce qui est la meilleure façon d'avoir le centrer, mais pas comme ça:

     Title title title title title title 
           ------------ 
           |input text| some text 
           ------------ 

       Title title title title title title title title 
          ------------ 
          |input text| some other text 
          ------------ 

          Title title title title 
          ------------ 
          |input text| some other other text 
          ------------ 

Answer 1

Essayez ceci: http://jsfiddle.net/5CYHZ/1/

HTML

<div class="center"> 
    <label>Name</label> 
    <input type="text" /> 
</div> 

<div class="center"> 
    <label>Address</label> 
    <input type="text" /> 
</div> 

CSS

div.center { 
    width: 200px; 
    position: relative; 
    margin: 0 auto; 
    padding: 6px 0px; 
} 
label { position: absolute; left: 166px; } 

Answer 2

HTML:

<div class='mycentereditem'> 
    <input type='text' /> 
    text 
</div> 
<div class='mycentereditem'> 
    <input type='text' /> 
    more text 
</div> 
<div class='mycentereditem'> 
    <input type='text' /> 
    even more text 
</div> 

CSS:

.mycentereditem { 
    text-align: left; 
    margin: 0 auto; 
    width: 400px; 
} 

Démo:

http://jsfiddle.net/6aLyj/

Answer 3

Vous pouvez utiliser divs avec padding-left:50%. Live demo.

Answer 4

Quelque chose comme cela devrait fonctionner:

HTML 



<div> 
     <div class="title"> 
      Title Title Title 
     </div> 
     <div class="input"> 
      <input type="text" />Your Label 
     </div> 

     <div class="title"> 
      Title Title Title 
     </div> 
     <div class="input"> 
      <input type="text" />Your Label 
     </div> 

     <div class="title"> 
      Title Title Title 
     </div> 
     <div class="input"> 
      <input type="text" />Your Label 
     </div> 

    </div> 


CSS 

.title{ 
    width:100%; 
    text-align:center; 
} 

.input { 
    text-align:left; 
    width:50%; 
    margin: 0 25% 0 25%; 
} 

Le div intérieur sera fixé à 50% de ses parents, avec des marges de 25% à gauche et à droite en gardant centré. Le text-align est juste pour être sûr qu'il ne hérite pas d'un autre formulaire d'alignement plus haut dans la page. Changez en% à ce qui convient à votre page. Et vous devriez probablement ajouter le css à l'extérieur aussi.