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

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

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

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

2回答

3048閲覧

アイコンが縦方向に中央にならない

ryo_engineer

総合スコア33

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

1クリップ

投稿2018/04/20 15:40

リンクのためのボタンを作っているのですが、どうしてもアイコンがベースラインに並びません

まず文字なのですが、::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}

↓ 実際の表示
実際の表示

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

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

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

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

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

guest

回答2

0

ベストアンサー

問題の根本は.nav__topline-heightが未指定であることによります. そのため, ::before疑似要素の有無によってベースラインの位置が変動し, 結果テキストの描画縦位置が変化してしまっています.

vertical-alignがテキストの縦位置を親要素のベースラインに揃えるプロパティであることを踏まえると, 次のようにすればアイコン・文字列共に縦方向中央に並ぶことでしょう.

CSS

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 line-height: 40px;/*加える*/ 8} 9 10.nav__top-link { 11 padding-left: 5px; 12 color: #fff; 13 vertical-align: middle;/*加える*/ 14} 15.nav__top-link::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 vertical-align: middle;/*加える*/ 26}

投稿2018/04/20 21:26

defghi1977

総合スコア4756

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

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

ryo_engineer

2018/04/21 17:02

ありがとうございました 若干アイコンが下にずれ込みますが、おおよそベースラインに合わせることができました 親要素に line-height を指定しないといけなかったんですね
guest

0

nav__top-linkposition: relativeを指定し、
::beforeには下記のスタイルを付与することで上下中央にすることができます。

lang=stylesheet

1contetn: ''; 2position: absolute; 3top: 0; 4bottom: 0; 5display: inline-block; 6width: 25px; 7height: 25px; 8margin: auto; 9padding-right: 5px; 10background-size: contain; 11background-repeat: no-repeat; 12background-position: center center; 13background-image: url('/img/home.svg');

※アイコンによっては中央によっている様に見えないことがあります。

投稿2018/04/21 01:03

退会済みユーザー

退会済みユーザー

総合スコア0

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

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

ryo_engineer

2018/04/21 17:01

ありがとうございました 私の環境ではうまく動作しなかったみたいです
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問