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

我认为你的意思是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>";
        }?>

请告诉我这是否有效。

使用css保持元素居中

2 个答案: