css - Twitterbootstrapでドロップダウンを中央に配置するにはどうすればよいですか?

Question

グループ内のボタンで切り替えられるドロップダウンを中央に配置するのに苦労しています。グループは正しく中央に配置されますが、ドロップダウンは左隅に続きます。

ここに例があります。

誰か助けてくれませんか？

前もって感謝します！

Answer 1

多分あなたはそのようなものを探しています:ライブデモ (jsfiddle)

.centered {
    text-align: center;
}
.centered .dropdown {
    display: inline-block;
    min-width: 500px; /* Needs to be big enough for the menu to be centered in it */
}
.centered .dropdown.open .dropdown-menu {
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    width: 200px;
}

<div class="centered">
    <div class="dropdown">
        <a class="dropdown-toggle btn" id="dLabel" role="button" data-toggle="dropdown" data-target="#" href="#">
        Dropdown
        <b class="caret"></b>
        </a>
        <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
            <li><a href="#">a</a></li>
            <li><a href="#">b</a></li>
            <li><a href="#">c</a></li>
        </ul>
    </div>
</div>

CSS の編集が完了しました

Answer 2

div.dropdown内側を中央に配置したい場合は、次のdivようにします。

#dropdown1 {
    width: 183px;
    margin: 0 auto;
}​

その欠点は、中央に配置する要素の正確な幅を知る必要があることです (これが、ID をセレクターとして使用する理由です。もちろん、最初にそれを割り当てる必要があります)。

更新された fiddleでどのように機能するかを確認してください。