與非中心的標籤中心場

Question

編輯

我想達到這樣的事情：

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

什麼是有擁有它爲中心的最簡單的方法，但不喜歡這樣的：

     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

試試這個：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; 
} 

演示：

http://jsfiddle.net/6aLyj/

Answer 3

你可以使用的div padding-left:50%。 Live demo。

Answer 4

像這樣的東西應該工作：

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

內部DIV將設置爲與左側25％的利潤率父的50％左右保持它爲中心。文本對齊只是爲了確保它不會繼承頁面上的另一個對齊表單。更改爲適合您網頁的百分比。你應該也可以在外部添加css。