如何在中心显示 bootstrap 选择器而不是文本？

Question

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

/*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

尝试：

select
{
  margin: 10px auto;
}

Answer 2

在您的 .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>

Answer 3

将选择放在 <div> 内并以 css 居中： - 固定尺寸 - 左右边距自动

/*end menu*/
.login-section{
background-color: #fff; 
  border-radius: 04px;
  width: 295px;
   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: 10px;
}
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;
}
#select-cont {
   width:250px;
   margin-left:auto;
   margin-right:auto;
}

<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">
   <div id="select-cont">
       <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>
</div>

如何在中心显示 bootstrap 选择器而不是文本？

How to display bootstrap selectpicker in center not text?

html

css

select

html-select

bootstrap-selectpicker