Q&A
patapata5050様
お忙しい中ご教示頂きまして、誠にありがとうございます！
ulにwidthを指定して、classにcenter-blockを入れることで、メニューの位置が動きました。
ありがとうございます。しかしながら、真ん中には来ませんでした・・・
これは、widthの指定が大きすぎるということなのでしょうか？
前提・実現したいこと
ulを左右中央に持ってきたいです。
発生している問題・エラーメッセージ
通常のulではulにtext-align: center;を、liにdisplay: inline-block;を加えることで
できるのですが、Bootstrapではそれができません。
どこを直せば良いのかわからず、ご教示を賜りたく存じます。
該当のソースコード
HTML
1<!doctype html> 2<html> 3<head> 4<meta charset="UTF-8"> 5<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 6<script src="../../Downloads/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script> 7<link href="bootstrap.min.css" type="text/css" rel="stylesheet"> 8<link href="sample.css" type="text/css" rel="stylesheet"> 9<title>無題ドキュメント</title> 10</head> 11<body> 12 <ul class="nav nav-pills"> 13 <li class="active"><a href="#tab1" data-toggle="pill">ハイチャウ区</a></li> 14 <li><a href="#tab2" data-toggle="pill">タインケー区</a></li> 15 <li><a href="#tab3" data-toggle="pill">ソンチャー区</a></li> 16 <li><a href="#tab4" data-toggle="pill">グーハインソン区</a></li> 17 <li><a href="#tab5" data-toggle="pill">リエンチェウ区</a></li> 18 <li><a href="#tab6" data-toggle="pill">カムレ区</a></li> 19 </ul> 20</body> 21</html>
CSS
1@charset "UTF-8"; 2/* CSS Document */ 3 4ul{ 5 text-align: center; 6} 7 8li{ 9 display: inline-block; 10}
試したこと
margin-leftとmargin-rightをautoにするなどいろいろ試してみましたがうまくいきませんで
補足情報（FW/ツールのバージョンなど）
ここにより詳細な情報を記載してください。
回答3件
0
まず、</li>がすべて<li>になってしまっているので直します。
そのうえで nav-justified を追加してください。
HTML
1 <ul class="nav nav-pills nav-justified"> 2 <li class="active"><a href="#tab1" data-toggle="pill">ハイチャウ区</a></li> 3<!-- 以下略 -->
Justified
https://getbootstrap.com/docs/3.3/components/#nav-justified
投稿2018/01/31 01:56
総合スコア13749
0
ベストアンサー
Bootstrapには、左寄せ・中央寄せ・右寄せなどを行えるクラスが用意されています。
下記のようなクラスを付与してみてはいかがでしょうか。
追記：ulに対して横幅（width）が指定されていない場合、中央寄せにならないので注意して下さい
HTML
1 <ul class="nav nav-pills center-block"> 2 <li class="active text-center"> 3 <a href="#tab1" data-toggle="pill">ハイチャウ区</a> 4 <li> 5 <li class="text-center"> 6 <a href="#tab2" data-toggle="pill">タインケー区</a> 7 <li> 8 〜省略〜 9 </ul>
投稿2018/01/30 09:29
編集2018/01/30 09:35
総合スコア34
そうですね、左寄りになっていれば大きすぎ、右よりであれば小さすぎだと思われます。「GoogleChromeでページを表示->右クリック->検証」でソースが表示されますが、ul部分にカーソルを合わせれば要素が青くなって直感的にulの範囲を把握することが出来ます。
右側に表示されているStyles部分でwidthを調整すればリアルタイムで横幅が変更できるのでそこで調整して更新すればいいと思います！
patapata5050様、お返事遅くなりまして申し訳ございません。左寄りになっていれば大きすぎ、右よりであれば小さすぎですね。ありがとうございます。確認させていただきます。
0
あまりよろしくない方法ですが、
!importantを使ってみてください。
bootstrap以外でも、どうしても、このCSSを優先させたい！って時の裏技です。
css
1@charset "UTF-8"; 2/* CSS Document */ 3 4ul{ 5 text-align: center !important; 6} 7 8li{ 9 display: inline-block !important; 10}
投稿2018/01/30 09:09
総合スコア9528
お忙しい中ご回答いただきまして誠にありがとうございます！miyabi_takatsuk様から頂いたCSSを貼り付けてみましたが、変化が起きませんでした。これは、私のブラウザーに問題があるのでしょうか？
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/01/31 03:13