パンくずリストを縦方向に揃えたい

実現したいこと

ぱんくずリストを垂直方向に中央にそろえたい

前提

ここに質問の内容を詳しく書いてください。
htmlとcssでぱんくずリストを作成しています。
グーグルのアイコンを読み込み、表示させるとホームの部分だけが下に下がって文字が垂直方向にそろいません

該当のソースコード

html
1<head>
2  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
3</head>
4  <main>
5    <nav>
6      <ol class="breadcrumb">
7        <li><a href="/"><span class="material-symbols-outlined">home</span>ホーム</a></li>
8        <li><a href="/.../">2層目</a></li>
9        <li>現在のページ</li>
10      </ol>
11    </nav>
12  </main>

該当のソースコード

css
1@charset "UTF-8";
2
3.material-symbols-outlined {
4  font-variation-settings:
5  'FILL' 0,
6  'wght' 200,
7  'GRAD' 0,
8  'opsz' 24
9}
10
11.breadcrumb {
12  display: flex;
13  flex-wrap: wrap;
14  list-style: none;
15  vertical-align: middle;
16}
17
18.breadcrumb li:not(:last-of-type)::after {
19  content: "›";
20  margin: 0 .6em; /* 記号の左右の余白 */
21  color: #777; /* 記号の色 */
22}
23
24.material-symbols-outlined {
25    font-family: 'Material Symbols Outlined';
26    font-weight: normal;
27    font-style: normal;
28    font-size: 24px;
29    line-height: 1;
30    letter-spacing: normal;
31    text-transform: none;
32    display: inline-block;
33    white-space: nowrap;
34    word-wrap: normal;
35    direction: ltr;
36    -webkit-font-feature-settings: 'liga';
37    -webkit-font-smoothing: antialiased;
38}

試したこと

.material-symbols-outlined にかかっているcssが原因かと思い、さわってみましたが改善されません

yambejp

2024/04/23 01:07

手書きで良いので想定する結果を図示できませんか？

行動規範の内容に同意します

回答3件

ベストアンサー

おそらくベースラインの上にグリフの余白があることがずれて見える原因だろうと思います。
ですので、他のテキストをベースラインで合わせて、アイコンだけvertical-alignで合わせる感じでどうでしょうか。

CSS
1@charset "UTF-8";
2
3.material-symbols-outlined {
4    font-variation-settings:
5        'FILL' 0,
6        'wght' 200,
7        'GRAD' 0,
8        'opsz' 24
9}
10
11.breadcrumb {
12    display: flex;
13    flex-wrap: wrap;
14    list-style: none;
15    vertical-align: middle;
16    align-items: baseline; /* これ */
17}
18
19.breadcrumb li:not(:last-of-type)::after {
20    content: "›";
21    margin: 0 .6em;
22    /* 記号の左右の余白 */
23    color: #777;
24    /* 記号の色 */
25}
26
27.material-symbols-outlined {
28    font-family: 'Material Symbols Outlined';
29    font-weight: normal;
30    font-style: normal;
31    font-size: 24px;
32    line-height: 1;
33    letter-spacing: normal;
34    text-transform: none;
35    display: inline-block;
36    white-space: nowrap;
37    word-wrap: normal;
38    direction: ltr;
39    -webkit-font-feature-settings: 'liga';
40    -webkit-font-smoothing: antialiased;
41    vertical-align: bottom; /* これ */
42}

投稿2024/04/23 02:33

Lhankor_Mhy

総合スコア36134

sususuzu

2024/04/23 12:40

回答ありがとうございます。試したところ問題が解決しました！ベストアンサーに選ばせていただきました。

行動規範の内容に同意します

とりあえず

CSS
1.breadcrumb *{
2display:flex;
3align-items:center;
4height:100%;
5}

投稿2024/04/23 01:08

yambejp

総合スコア114883

sususuzu

2024/04/24 01:39

コードのご提示ありがとうございました。別の方のアンサーで解決いたしましたが、こちらもまた参考にさせていただきます。ありがとうございました！

行動規範の内容に同意します

単純に home が大きいため高さの一番大きいサイズとして認識されているので同じ
inline の span も影響を受けているだけなので home の font-size を他のののと一緒にすればいいのではないでしょうか？

参考: playground

投稿2024/04/22 16:06

juner

総合スコア128

sususuzu

2024/04/23 00:58

回答ありがとうございます！グーグルフォントのアイコン（home）を表示させるはずなのですが、文字と揃えてfont-size:14pxに変更しましたが解決できませんでした。

行動規範の内容に同意します

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

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

ただいまの回答率
85.47%

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

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

質問する

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

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