CSS를 사용하여 요소를 중앙에 유지하기

Question

div에 jquery가있는 선택 드롭 다운을 동적으로 추가하고 있습니다. 중심에서 div로 시작하고 새로운 드롭 다운이 추가되어 센터에서 밖으로 바깥쪽으로 나가기를 원합니다.

#pageMiddle{ 
    width:940px; 
    margin:0 auto; 
    text-align: left; 
    position:relative; 
} 
#searchBar{ 
background: red; 
width:500px; 
margin: 0 auto; 
} 
#searchwrapper{ 
    width:850px; 
background: blue; 
} 

#searchwrapper form { 
display:inline ; 
margin: 0 auto; 

} 

과 실제 HTML :

<div id="pageMiddle"> 
<div id="holder"> 
<div id="searchBar"> 
    <div id="searchwrapper">  
     <form name="search_input"> 
      I am looking for a  
      <div id="sBar1" style="display:inline;"> 
<select id="search_level" class="selectSearchBar" name="search_level"> 
       <?php echo "<option>Level</option>"; 
     while($row = mysqli_fetch_array($result_level, MYSQLI_ASSOC)){ 
     echo "<option value=".$row['id'].">".$row['level']."</option>"; 
      }?>    
      </select> 
       </div> 
       <div id="sBar2" class="selectSearchBar"></div> 
       <div id="sBar3" class="selectSearchBar"></div> 
      tutor in 
<input type=text class="searchbox" id="location" value="Location"/> 
    <input type=image src="images/search_icon.png " class="searchbox_submit" name="searchbox_submit" onclick="searchLocations()" value=""></form> 
     </div> 
    </div> 
</div> 
</div> 

Answer 1

나는 this과 같은 것을 의미한다고 생각합니까?

파란색 섹션의 가운데가 빨간색 섹션에 표시됩니다. 이 작업은 표 표시로 수행되었으므로 무한 크기의 내용이 자동 여백을 통해 중앙에 배치됩니다. 그렇지 않으면 블록 요소 및이 명확한 크기 여야합니다.

#searchwrapper 
{ 
    display: table; 
    margin: 0 auto; 
} 

Answer 2

<?php echo "<option style="text-align:center;">Level</option>"; 
    while($row = mysqli_fetch_array($result_level, MYSQLI_ASSOC)){ 
    echo "<option value=".$row['id'].">".$row['level']."</option>"; 
     }?>    

이 제발 작동하는지 알려줘 여기

는 div의에 대한 CSS입니다.