twitter-bootstrapの.btn-groupを中央に配置する方法は?
2023-09-28 02:44:17
質問
私は
twitter-bootstrap
を使っているのですが、中央揃えにするのがかなり難しいことがわかりました。
div
というクラスがあり
.btn-group
(
リンク
).
通常、私は
margin: 0 auto;
または
text-align: center;
を使うと div 内のものを中央に配置することができますが、内側の要素に
float: left
というプロパティがある場合は動作しません。
どのように解決するのですか?
編集しました。Bootstrap 3から変更になりました。以下の Bootstrap 3 の解決策を参照してください。
折り返しdivを追加するのは論外ですか?
この例を見てください。 http://jsfiddle.net/EVmwe/4/
コードの重要な部分です。
/* a wrapper for the paginatior */
.btn-group-wrap {
text-align: center;
}
div.btn-group {
margin: 0 auto;
text-align: center;
width: inherit;
display: inline-block;
}
a {
float: left;
}
ボタングループをdivで囲み、divをtext-align centerに設定します。また、ボタングループはdisplay inline-block、widthを継承するように上書きする必要があります。
アンカーの display を inline-block に、float: none を上書きすることも、おそらく @Andres Ilich が言ったようにうまくいくでしょう。
Bootstrap 3 用のアップデート
Bootstrap 3 では、アライメントクラス (
ドキュメント
). あなたは今、単に
text-center
クラスを親に追加するだけです。このように
<div class="text-center">
<ul class="pagination">
<li class="disabled"><a href="#">«</a></li>
<li class="active"><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">»</a></li>
</ul>
</div>
動作例はこちら。 http://jsfiddle.net/EVmwe/409/
関連
-
[解決済み] 要素を水平方向にセンタリングする方法
-
[解決済み] How can I set the default value for an HTML <select> element?
-
[解決済み] Twitter Bootstrapのメニューをクリックではなく、ホバーでドロップダウンさせる方法
-
[解決済み] Twitter Bootstrap 3を使用して列を中央に配置する
-
[解決済み] divブロック内のテキストを(水平方向と垂直方向に)センタリングするにはどうすればよいですか?
-
[解決済み] Bootstrapの列をすべて同じ高さにするにはどうしたらいいですか?
-
[解決済み] Twitter Bootstrapでナビバーの色を変更する
-
[解決済み] Twitter Bootstrap Form File Element Upload Button(ファイルアップロードボタン
-
[解決済み] Twitter Bootstrapを使った中央寄せのコンテンツはどうなっているのか?
-
[解決済み】CSSを使用して、すべてのブラウザでdiv要素を垂直方向に中央に配置するにはどうすればよいですか?
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
document.forms 使用方法
-
[解決済み] HTMLのテーブルからボーダーを完全に削除する方法
-
[解決済み] bootstrapでボタンにリンクを貼るには?
-
[解決済み] HTML 5: Is it <br>, <br/>, or <br />?
-
[解決済み] ローカルストレージとCookieの比較
-
[解決済み] リンクを新しいタブまたはウィンドウで開く[重複]。
-
[解決済み] HTML5でfloat入力タイプはありますか?
-
[解決済み] CSSだけでリンクを無効化する方法
-
[解決済み] フレックスアイテムを右寄せにするには?
-
[解決済み] HTMLのdiv要素とspan要素の違いは何ですか?