Bootstrap - css - параметры центра выпадающего меню

Question

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

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

Мой 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> 

Я пытался добавить в классе = «текст-центра», в загрузчике этот класс, чтобы центрировать элементы, но в данном случае это Безразлично» т работы.

Я положил в jsfiddle пример:

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

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

Answer 1

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

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

Answer 2

Пока фактического списка абсолютно позиционирует вас не может центрировать этот список самостоятельно. Собственно, именно поэтому он не центры :) Одно из решений для вас, чтобы обернуть ниспадающее меню с <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>