質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

メニュー

メニューは、UIにおける仕組みであり、ユーザに機能の表示と実行する手段を与えます。

Q&A

解決済

1回答

383閲覧

メニューバーのメニューを上下真ん中に位置させたい

7seHAL

総合スコア4

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

メニュー

メニューは、UIにおける仕組みであり、ユーザに機能の表示と実行する手段を与えます。

0グッド

0クリップ

投稿2022/02/05 05:27

前提・実現したいこと

下記のようなメニューバーをつくったのですが、一つだけ二行になってしまい、さらに上部で揃ってしまっているので、二つ目がメニューバーの真ん中に位置しない状態になっています。
イメージ説明
2つ目の要素だけ、真ん中に位置させたい(7px上に上げたい)です。

該当のソースコード

HTML

1<nav class="navigation l-horizon"> 2 <ul class="nav-list"> 3 <li class="nav-item nav-item__link"><a href="#area-1">メニューについて</a></li> 4 <li class="nav-item nav-item__link"><a href="#area-2">メニューメニューについて</a></li> 5 <li class="nav-item nav-item__link"><a href="#area-3">Q&A</a></li> 6 <li class="nav-item nav-item__link"><a href="#area-4">お問い合わせ</a></li> 7 </ul> 8 </nav>

css

1/*navigation*/ 2nav{ 3text-align: center; 4 5} 6nav ul{ 7margin: 0 ; 8padding: 0 ; 9} 10 11nav a{ 12display: block; 13box-sizing: border-box; 14height: 55px; 15line-height: 55px; 16text-decoration: none; 17} 18 19.btn-trigger{ 20 display: none; 21} 22 23.navigation { 24 display: flex; 25 opacity: 1; 26 position: static; 27 width: auto; 28 height: auto; 29 margin: 0 auto; 30 font-family: 'Montserrat', 'Noto Sans JP', sans-serif; 31 background-color: #020507; 32 top: 0; 33 left: 0; 34 z-index: 100; 35 transition: .3s ease-in-out; 36} 37 38.nav-list{ 39 display: flex; 40 text-align: center; 41 margin: 0 auto; 42} 43 44.nav-item{ 45 margin: 0 auto; 46} 47 48.l-horizon .nav-item.current>a { 49 color: #aaa; 50} 51 52.l-horizon .nav-item>a { 53 display: block; 54 height: 30px; 55 line-height: 30px; 56 font-size: 1.5rem; 57} 58 59nav li:not(:nth-child(4)) { 60 border-right: 1px solid #5d5d5d; 61} 62 63nav li { 64 list-style: none; 65 display: inline-block; 66 width:auto; 67 margin: 0 auto; 68} 69 70.nav-item { 71 margin: 0 auto; 72 } 73.nav-list { 74 width: 100%; 75} 76.nav-item { 77 width: 100%; 78} 79 80nav ul li a { 81 display: block; 82 text-decoration: none; 83 color: #fff; 84 margin: 20px auto; 85 transition: all .3s; 86} 87 88nav ul li li a{ 89 text-align: left; 90 padding: 0px auto; 91} 92 93@media screen and (max-width:768px){ 94.nav-item>a:not(:nth-child(2)) { 95 font-size: 0.3rem; 96 height: 30px; 97 line-height: 15px; 98 position: relative; 99 top: 15%; 100} 101 102.nav-item>a:nth-child(2) { 103 font-size: 0.3rem; 104 height: 30px; 105 line-height: 15px; 106 position: relative; 107 top: 7.5%; 108} 109 110nav ul li a { 111 display: block; 112 text-decoration: none; 113 color: #fff; 114 margin: 10px auto; 115 transition: all .3s; 116} 117} 118

試したこと

nth-child(n)を試してみましたが、上手くいきませんでした。
宜しくお願いします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

2つ目の要素だけ、真ん中に位置させたい(7px上に上げたい)

:nth-child()を使うのがいいと思います。

css

1 nav ul li:nth-child(2) a { 2 margin-top: 13px; 3 }

ただ、ビューポートサイズによっては1行になるようですから、このような小手先の修正はあまりよくないと思います。普通にフレックスボックスやグリッドレイアウトで上下中央配置にすることをおすすめします。

投稿2022/02/05 05:50

Lhankor_Mhy

総合スコア35871

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

7seHAL

2022/02/05 11:15

ありがとうございます! :nth-child()は試してみたのですが、使う場所が間違っていたようです。 勉強になりました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問