div 안에 입력 그룹을 중앙에 배치하는 방법은 무엇입니까?

Question

.input-group을 <div> 안에 넣고 싶습니다. center-block 클래스를 사용할 때 <span>은 전체 너비를 가져와 그 아래의 입력 필드를 푸시 다운합니다. 나는 그 (것)들을 함께 중심에두고 싶다.

<div class="col-lg-12 col-sm-12 col-md-12 col-xs-12"> 
    <div class="input-group input-group-lg inv-amount-block"> 
     <span class="input-group-addon" id="inv-rs">Rs</span> 
     <input type="text" class="form-control" placeholder="Your Amount" aria-describedby="basic-addon1"> 
    </div> 
</div> 

기본적으로 어떻게 중심에 배치하고 싶은가? 여기

그냥 편집 .center-block

의 CSS의 표시 속성을 변경 fiddle

Answer 1

입니다 : display: block와 display: table의 차이 즉 -. display: block - 사용 가능한 공간의 100 %까지 확장되며, display: table - 내용의 너비만큼 확장됩니다.

후자의 경우 span 및 input field은 내용의 너비가되며 지정된 전체 40% 너비를 차지하지 않습니다.

.center-block { 
 
    display: table; /* Instead of display:block */ 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
}

   <div class = "col-lg-12 col-sm-12 col-md-12 col-xs-12 "> 
 

 
       <div class="input-group input-group-lg inv-amount-block center-block "> 
 
        <span class="input-group-addon " id="inv-rs">Rs</span> 
 
        <input type="text" class="form-control" placeholder="Your Amount" aria-describedby="basic-addon1"> 
 
       </div> 
 
       
 
       </div><br> 
 
       
 
          <div class = "col-lg-12 col-sm-12 col-md-12 col-xs-12 "> 
 

 
       <div class="input-group input-group-lg inv-amount-block "> 
 
        <span class="input-group-addon " id="inv-rs">Rs</span> 
 
        <input type="text" class="form-control" placeholder="Your Amount" aria-describedby="basic-addon1"> 
 
       </div> 
 
       
 
       </div>