Centered field with non-centered label

EDIT

I want to achieve something like that:

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

what is the easiest way to have have it centered, but not like this:

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

---

Try this: 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; } 

---

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

Demo:

http://jsfiddle.net/6aLyj/

---

You could use divs with padding-left:50%. Live demo.

---

Something like this should work:

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%; 
 }

The inside div will be set to 50% of its parent with 25% margins on the left and right keeping it centered. The text-align is just to be sure its not inheriting another alignment form further up the page. Change to % to what ever suits your page. And you should probably be adding the css externally too.