Warum kann meine Dropdown-Liste nicht in der Mitte positioniert werden?

Question

Ich möchte die Position meiner Dropdown-Liste als Mittelpunkt festlegen. Aber wenn ich

align="center"

machte die posistion ist nicht im Zentrum

Hier ist mein Codes:

<?php 

/* @var $this yii\web\View */ 



$this->title = 'Beranda - Pascasarjana Dalam Angka'; 
?> 
<div class="site-index"> 

    <div class="jumbotron"> 
     <h1>Selamat Datang!</h1> 

     <p class="lead-lg-5">Aplikasi ini ditujukan untuk menampilkan <br>data-data dan statistik mahasiswa program Pascasarjana Universitas</p> 


    <div align="center" class="body-content"> 


    <div align="center" class="dropdown"> 
     <button align="center" class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Pilih Tahun Periode 
      <span class="caret"></span> 
     </button> 
       <ul align="center" class="dropdown-menu"> 
        <li><a href="#">Periode 2001-2005</a></li> 
        <li><a href="#">Periode 2006-2010</a></li> 
        <li><a href="#">Periode 2011-2015</a></li> 
       </ul> 
    </div> 



    </div> 


    </div> 

</div> 

Und hier ist das Ergebnis:

Was kann ich tun, damit der l Kann es in der Mitte sein? Vielen Dank im Voraus

Answer 1

Setzen Sie die Drop-down in einem div dann diesen Tauchgang ausrichten in der Mitte erscheint CSS Ex mit:

/* centers the form div to the screen */ 
#divCenter{ 
    position:absolute; 
    width:800px; 
    top:50%; 
    left:50%; 
    margin-top:-180px; 
    margin-left:-410px; 
    z-index:15; 
    border-radius: 10px; 
} 

Answer 2

Nehmen Position relativ Eigenschaft auf die Eltern und die Position absolut zum Wrapper Drop-down-Elementen .

.dropdown { 
    position: relative; 
} 

.dropdown .dropdown-menu { 
    position: absolute; 
    top: 50px; 
    width: 100%; 
} 

Hoffe das hilft.

Answer 3

Mein Tipp: Verwenden Sie die integrierten Bootstrap-Klassen mit yii2! Hier ist ein Arbeitsbeispiel Ihrer Ansichtsdatei. Kurz anwer: Sie haben in einem .btn-group

<?php 
use yii\helpers\Url; 
use yii\helpers\Html; 
use yii\bootstrap\Dropdown; 
/* @var $this yii\web\View */ 

?> 
<div class="site-index"> 

    <div class="jumbotron"> 
     <h1>Selamat Datang!</h1> 
     <p class="lead-lg-5"> 
      Aplikasi ini ditujukan untuk menampilkan <br> 
      data-data dan statistik mahasiswa program Pascasarjana Universitas 
     </p> 
    </div> 
    <div class="col-md-12 school-options-dropdown text-center"> 
     <div class="dropdown btn-group"> 
      <a href="#" data-toggle="dropdown" class="dropdown-toggle">Pilih Tahun Periode <b class="caret"></b></a> 
      <?php 
       echo Dropdown::widget([ 
        'items' => [ 
         ['label' => 'Periode 2001-2005', 'url' => '#'], 
         ['label' => 'Periode 2001-2005', 'url' => '#'], 
         ['label' => 'Periode 2001-2005', 'url' => '#'], 

        ], 
       ]); 
      ?> 
     </div> 
    </div> 
</div>