リンクのためのボタンを作っているのですが、どうしてもアイコンがベースラインに並びません
まず文字なのですが、::beforeを指定しないと左上端に追いやられてしまいます
::beforeを指定すると、文字がvertical-align: middleの位置にやってきます(謎)
とりあえず、この謎現象は仕方ないので、beforeを適用しますが、次はアイコンが上端に引っ付いてしまいます
何とか、アイコンを文字のベースラインに合わせたいので、background-position: center center; や vertical-align: baseline(初期値ですが) を使用してみましたが効きませんでした
なぜでしょうか?
HTML
1<nav class="nav"> 2 <ul class="nav__menu"> 3 <li class="nav__top"><a class="nav__top-link" href="/index">トップページ</a></li> 4 </ul> 5</nav>
SCSS
1.nav__top { 2 width: 230px; 3 height: 40px; 4 border-radius: 2px; 5 box-shadow: 0 2px 5px rgba(0,0,0,0.26); 6 background-color: #007dbf; 7} 8 9.nav__top-link { 10 display: inline-block; 11 width: 100%; 12 height: 100%; 13 padding-left: 5px; 14 color: #fff; 15 &::before { 16 display: inline-block; 17 width: 25px; 18 height: 25px; 19 padding-right: 5px; 20 content: ''; 21 background-size: contain; 22 background-repeat: no-repeat; 23 background-position: center center; 24 background-image: url('/img/home.svg'); 25 } 26}
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/04/21 17:02