Q&A
html
1<!DOCTYPE html> 2<html lang="ja"> 3 <head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1"> 6 <!-- Bootstrap4 --> 7 {% load bootstrap4 %} 8 {% bootstrap_css %} 9 {% bootstrap_javascript jquery='full' %} 10 <!-- Bootstrap4 --> 11 <title>{% block title %}Blog{% endblock %}</title> 12 <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> 13 <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css"> 14 <link href="styles/style.css" rel="stylesheet"> 15 16 17 <link href="//fonts.googleapis.com/css?family=Lobster&subset=latin,latin-ext" rel="stylesheet" type="text/css"> 18 19 <style> 20 .justify-content-center{ font-size: 40px;} 21 h1, a, h2 { 22 font-family: 'Lobster';} 23 h1, ul, li { text-align: center; } 24 25 #nav { 26 list-style: none; 27 overflow: hidden; 28 text-align: center; 29 } 30 #nav li { 31 width: 140px; 32 text-align: center; 33 background-color: rgb(3, 3, 3); 34 float: left; 35 height: 50px; 36 line-height: 50px; 37 margin-right: 2px; 38 } 39 #nav li a { 40 text-decoration: none; 41 color: #fff; 42 font-weight: bold; 43 padding: 20px; 44 } 45 </style> 46 47<ul id = nav> 48 <li><a href="#">MENU1</a></li> 49 <li><a href="#">MENU2</a></li> 50 <li><a href="#">MENU3</a></li> 51 <li><a href="#">MENU4</a></li> 52</ul>
横向きのメニューを中央に配置したいのですが、text-align: center;が効きません。左側に寄って配置されてしまいます。他のデザインは反映されています。
回答2件
0
ベストアンサー
text-alignはその名の通り、テキストの配置を指定するものなので、ブロック要素には適用できません。
ブロック要素を中央配置したい場合の対応方法としては以下が挙げられます。
ulの幅を内包するliの幅の合計値に固定して、左右のmarginをautoにするulまたはliをdisplay:inline-blockにして、text-align:centerの効果を適用させるdisplay:flexによるFlexboxレイアウトでulまたはliを中央配置する
投稿2021/10/04 11:03
編集2021/10/05 02:48
総合スコア497
0
flexを使うと早いです。
また横並びもfloatを使わずにできます。
css
1#nav { 2 display:flex; 3 justify-content: center; 4}
投稿2021/10/04 10:59
総合スコア20
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。