중심 필드

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

당신은 padding-left:50%로 된 div를 사용할 수 있습니다. 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%; 
} 

내부 사업부는 왼쪽에 25 % 마진을 가진 부모의 50 %로 설정되며, 바로이 중심을 잡습니다. 텍스트 정렬은 다른 정렬 양식을 상속받지 않는 것이 페이지 위쪽으로 나오는지 확인하는 것입니다. 귀하의 페이지에 맞는 것을 %로 변경하십시오. 그리고 아마도 CSS를 외부 적으로 추가해야 할 것입니다.