Раскрывающийся список изменяет свой размер при изменении размера страницы

Question

У меня есть элемент select в моей форме. Когда я увеличиваю или уменьшаю масштаб моего браузера, элемент select изменяется и меняет свою позицию. Кинди, помоги мне. Я также прикреплю код.

 <div class="form-group">
        <select class="form-control" style="height:50px;" id="search_color">
          <option value=" " hidden>Color</option>
          <option value="0">Red</option>
          <option value="1">Green</option>
          <option value="2">Blue</option>
          <option value="3">Yellow</option>
          <option value="4">Orange</option>
          <option value="5">Purple</option>
          <option value="6">Grey</option>
          <option value="7">Multicolor</option>

        </select>
 </div>

Answer 1

По существу, классы начальной загрузки имеют некоторое поведение, которое варьируется в зависимости от размера экрана. В вашем случае вы можете применить базовый HTML center tag для переопределения поведения класса начальной загрузки и удержания вашего dropdown option в центре экрана.
Попробуйте это:

<div class="form-group">
       <center>
       <select class="form-control" style="height:50px;" id="search_color">
          <option value=" " hidden>Color</option>
          <option value="0">Red</option>
          <option value="1">Green</option>
          <option value="2">Blue</option>
          <option value="3">Yellow</option>
          <option value="4">Orange</option>
          <option value="5">Purple</option>
          <option value="6">Grey</option>
          <option value="7">Multicolor</option>

        </select>
        </center> 
 </div>