html - 如何在中心而不是文本中显示 bootstrap selectpicker？

Question

我正在使用 bootstrap selectpicker。我必须在弹出窗口的中心显示 selectpicker select 下拉菜单，但我不想让文本在 select 下拉菜单中居中。我可以显示按钮但不能显示 select 下拉菜单.你能帮我吗？

/*end menu*/
.login-section{
background-color: #fff; 
  border-radius: 04px;
  padding: 10px 20px;
   height: 290px;
   position: absolute;
   left: 50%;
   top: 50%; 
   margin-left: -150px;
   margin-top: -150px;
 -webkit-box-shadow: 1px 1px 22px 0px rgba(50, 50, 50, 0.25);
-moz-box-shadow:    1px 1px 22px 0px rgba(50, 50, 50, 0.25);
box-shadow:         1px 1px 22px 0px rgba(50, 50, 50, 0.25);  
}

  select
{
  margin: 0 auto;
  display: block;
}
input[type="submit"], select{
  display: block;
  padding: 07px 02px;
  margin: 07px auto;
  border-radius: 04px;
  width: 250px;

}

input[type="submit"]
{
  background-color: #773F9B;
  border: none;
  color: #fff;
  cursor: pointer;
  font-size:18px;
border-radius: 04px;
}

<link href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.3/css/bootstrap-select.min.css" rel="stylesheet"/>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/>
 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.3/js/bootstrap-select.min.js"></script>


<div class="login-section">
  	<select class="selectpicker"  data-live-search="true" name="test1" >
       <option>Select</option>
       <option>abc</option>
     <option>abc</option>
     <option>abc</option>
     <option>abc</option>
     <option>abc</option>
      </select>
<select  name="test2">
       <option>Select</option>
       <option>abc</option>
     <option>abc</option>
     <option>abc</option>
     <option>abc</option>
     <option>abc</option>
      </select>

      <select class="selectpicker"  data-live-search="true" name="test3" >
       <option>Select</option>
       <option>abc</option>
     <option>abc</option>
     <option>abc</option>
     <option>abc</option>
     <option>abc</option>
      </select>
      <input type="submit" name="submit" value="Submit">
</div>

Answer 1

在 .login-section 中添加了 padding: 10px 20px; 并删除了 width: 295px;

试试这个。

/*end menu*/
.login-section{
  padding: 10px 20px;
background-color: #fff; 
  border-radius: 04px;
   height: 290px;
   position: absolute;
   left: 50%;
   top: 50%; 
   margin-left: -150px;
   margin-top: -150px;
 -webkit-box-shadow: 1px 1px 22px 0px rgba(50, 50, 50, 0.25);
-moz-box-shadow:    1px 1px 22px 0px rgba(50, 50, 50, 0.25);
box-shadow:         1px 1px 22px 0px rgba(50, 50, 50, 0.25);  
}

select
{
  margin: 0 auto;
  display: block;
}
input[type="submit"], select{
  display: block;
  padding: 07px 02px;
  margin: 7px auto;
  border-radius: 04px;
  width: 250px;

}

input[type="submit"]
{
  background-color: #773F9B;
  border: none;
  color: #fff;
  cursor: pointer;
  font-size:18px;
border-radius: 04px;
}

<link href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.3/css/bootstrap-select.min.css" rel="stylesheet"/>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/>


<div class="login-section">
  	<select class="selectpicker"  data-live-search="true" name="test1" >
       <option>Select</option>
       <option>abc</option>
     <option>abc</option>
     <option>abc</option>
     <option>abc</option>
     <option>abc</option>
      </select>
<select  name="test2">
       <option>Select</option>
       <option>abc</option>
     <option>abc</option>
     <option>abc</option>
     <option>abc</option>
     <option>abc</option>
      </select>

      <select class="selectpicker"  data-live-search="true" name="test3" >
       <option>Select</option>
       <option>abc</option>
     <option>abc</option>
     <option>abc</option>
     <option>abc</option>
     <option>abc</option>
      </select>
      <input type="submit" name="submit" value="Submit">
</div>