Why my dropdown list can't be position in cent

问题:

I want to make the position of my dropdown list to be center. But when I made

align="center"

the posistion isn't in the center

Here is my 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>

And here is the result:

What may I do so that the list could be in the center? Thanks in advance

回答1:

Put the drop down in a div then align that dive to appear in the center using CSS Ex:

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

回答2:

Apply position relative property to the parent and position absolute to the dropdown elements wrapper.

.dropdown {
  position: relative;
}

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

Hope this helps.

回答3:

My advice: Use the build-in bootstrap classes with yii2! Here is a working example of your view file. Short anwer: You have to put the dropdown mechanism inside a .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>