Блог

Я создал веб-страницу с разными элементами. Одним из них является выпадающее меню. Я располагаю элемент по центру в середине веб-страницы:

но когда я нажимаю кнопку выпадающего меню и показываю параметры, они не центрируются.

Мой HTML-код:

 <div class="container-fluid">   <!-- Solo indicamos container-fluid ya que si añadimos container éste ocupa el 60% del a página -->

    <div class="row text-center">
        <h1>MIQUEL ALIMENTACIÓ</h1>
        <h4 id='titEdicion'></h4><h4 id='titEstado'></h4>
    </div>
    <br>

    <div id="toolbar">

        <div class="row text-center">
            <div class="dropdown">
                <button class="btn btn-addcom dropdown-toggle btn-size-edicion" type="button" data-toggle="dropdown">SELECCIONAR EDICIÓ
                    <span class="caret"></span></button>
                <ul class="dropdown-menu text-center" id="drEdicion">
                    <li"><a href=#>TOT</a></li>
                    <?php 
                    $result = dbQuery($conn, "SELECT * FROM produccion.ma_edicion");
                    while ($row = pg_fetch_row($result)){ ?>
                    <li><a href=#><?php echo $row[2]; ?></a></li>
                    <?php 
                    }
                    ?>
                </ul>
            </div>
        </div>
        <br>
            <div class="row text-center">               
                <div>
                    <button id="newedition" type="submit" class="btn btn-group btn-size-edicion" data-toggle='modal' data-target='#edicion'>NOVA EDICIÓ</button>

                </div>
            </div>         
    </div>
</div>
  

Я пытался добавить в class=’text-center’, в bootstrap этот класс для центрирования элементов, но в данном случае это не работает.

Я поместил в jsfiddle пример:

https://jsfiddle.net/ruzD/DTcHh/26469/

С последними изменениями:

вы можете попробовать

 <button class="btn btn-addcom dropdown-toggle btn-size-edicion" id="menu_list" type="button" data-toggle="dropdown">SELECCIONAR EDICIÓ
              <span class="caret"></span></button>
              <ul class="dropdown-menu text-center" id="drEdicion" aria-labelledby="menu_list">
                    <li"><a href=#>TOT</a></li>
              <?php 
                $result = dbQuery($conn, "SELECT * FROM produccion.ma_edicion");
                while ($row = pg_fetch_row($result)){ ?>
                    <li><a href=#><?php echo $row[2]; ?></a></li>
                <?php 
                }
                ?>
                </ul>
  

Пока фактический выпадающий список расположен абсолютно, вы не можете центрировать этот список независимо. На самом деле именно поэтому он не центрируется 🙂 Одно из решений для вас — обернуть выпадающий список <div class="dropdown-wrapper"> и придать ему стиль:

 .dropdown-wrapper {
  width: 30%;
  margin: 0 auto;
}
  

Ширина может быть любой, какой вы пожелаете.

 .dropdown-wrapper {
  width: 30%;
  margin: 0 auto;
}  

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="dropdown-wrapper">
  <div class="dropdown">
    <button class="btn btn-addcom dropdown-toggle btn-size-edicion" type="button" data-toggle="dropdown">SELECCIONAR EDICIÓ
    <span class="caret"></span></button>
    <ul class="dropdown-menu text-center" id="drEdicion">
      <li><a href=#>TOT</a></li>
    </ul>
  </div>
</div>