bootstrap 4を適用しています。
instagramのロゴ(公式バーナー)をナビバーに入れているのですが、写真の様にその他ナビバー記載の文字と垂直水平になりません。。うまくいくやり方をご教示頂けますと助かります。
instagramの公式バナーを使用しているため、style属性を使用してhtmlに直接cssをう埋め込んでいます。
html
1<header> 2 <nav class="navbar navbar-static-top navbar-light bg-faded"> 3 <a class="navbar-brand" href="/">TOP</a> 4 <ul class="nav navbar-nav"> 5 <li class="nav-item active"> 6 <a class="nav-link" href="/profile">プロフィール</a> 7 </li> 8 <li class="nav-item"> 9 <a class="nav-link" href="/course">コース紹介</a> 10 </li> 11 <li class="nav-item"> 12 <a class="nav-link" href="/lesson">講義予定・実績</a> 13 </li> 14 <li class="nav-item"> 15 <a class="nav-link" href="#">お問い合わせ</a> 16 </li> 17 <li class="nav-item"> 18 <style> 19 .ig-b- { display: inline-block; } 20 .ig-b- {height: 4; line-height: 4; vertical-align: middle;} 21 .ig-b- img { visibility: hidden; } 22 .ig-b-:hover { background-position: 0 -60px; } .ig-b-:active { background-position: 0 -120px; } 23 .ig-b-24 { width: 24px; height: 24px; background: url(//badges.instagram.com/static/images/ig-badge-sprite-24.png) no-repeat 0 0; } 24 @media only screen and (-webkit-min-device-pixel-ratio: 2), 25 only screen and (min--moz-device-pixel-ratio: 2), 26 only screen and (-o-min-device-pixel-ratio: 2 / 1), 27 only screen and (min-device-pixel-ratio: 2), 28 only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) 29 {.ig-b-24 { background-image: url(//badges.instagram.com/static/images/ig-badge-sprite-24@2x.png); background-size: 60px 178px; } } 30 </style> 31 <a href="https://www.instagram.com/faceyogamisaki/?ref=badge" class="ig-b- ig-b-24"> 32 <img src="//badges.instagram.com/static/images/ig-badge-24.png" alt="Instagram" /> 33 </a> 34 </li> 35 </ul> 36</nav> 37</header>
回答1件
あなたの回答
tips
プレビュー