Как отобразить селектор выбора загрузчика в центре, а не текст?

Я использую загрузчик selectpicker. Мне нужно отобразить раскрывающийся список selectpicker в центре всплывающего окна, но я не хочу центрировать текст внутри выпадающего списка 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>

Источник

3 ответа

Решение

Добавленной padding: 10px 20px; и удалил width: 295px в вашем .login-section;

Попробуй это.

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

Источник

Поместите выбранные внутри <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>

Источник

Пытаться:

select
{
  margin: 10px auto;
}
Источник
Другие вопросы по тегам