html - 使用 css 保持元素居中

Question

我正在将带有 jquery 的选择下拉列表动态添加到 div 中。我想从 div 居中开始，然后添加新的下拉菜单以从中心向外移动。

这是 div 的 CSS：

#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

我想你的意思是这样的？

请注意，蓝色部分位于红色部分的中心。这是通过表格显示完成的，它允许通过自动边距将不定大小的东西居中。否则，它必须是块元素并且具有确定的大小。

#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>";
        }?>             

请让我知道这是否有效。