Question

我想将DropDownList放在div中吗？

这是我的代码：

<div id="divRech" class="icon-select-group form-control"> 
  <asp:DropDownList ID="ddlHotelIslands" runat="server" AutoPostBack="false" name="search-hotel-island"> 
  </asp:DropDownList>
</div>

Answer 1

默认情况下，select上没有display: block标记，您可以这样将其放置在父div的中间：

div#divRech { width: 80%; margin: auto; border: 1px solid black; }
div#divRech #ddlHotelIslands { display: block; margin: auto; }

<div id="divRech" class="icon-select-group form-control"> 
  <select ID="ddlHotelIslands" runat="server" AutoPostBack="false" name="search-hotel-island"> 
  <option>1</option>
  <option>2</option>
  <option>3</option>
  </select>
</div>

Answer 2

方法1 请将select更改为display:block，并使其居中，您可以使用margin: 0 auto
方法2 ，请使用变换属性transform:translate(-50%,-50%)将其设置为垂直和水平中心

.icon-select-group{
border:1px solid grey;
padding:20px;
position:relative
}
select{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%)
}

<div class="icon-select-group form-control"> 
  <select> 
  <option>1</option>
  <option>2</option>
  <option>3</option>
  </select>
</div>

在div中居中放置DropDownList

2 个答案: