（CSS） ul要素を上下中央に配置したい

フッターにあるul要素を上下中央に配置したいです。

こちらの赤枠で囲った部分です。
これを黄色のdivの上下中央に配置したいのですがうまくできません…

アドバイスいただけますと幸いです。

以下、コードです。

html

<body>
    <div id="app" class="wrapper">
        <header id="header">
            <div>
                <h1>お申込み</h1>
            </div>
        </header>
        <div class="container">
            <div>                
                <div class="text_center">
                    大変申し訳ございません。                                        
                </div>
            </div>
        </div>
        <footer id="footer">
            <div id="footer_navi">
                <div class="logo">
                    <img src="../assets/img/logo.png" alt="" width="227">
                </div>
                <nav id="navi">
                    <ul id="footer_navi_menu">
                        <li><a href="#main-chief">講師</a></li>
                        <li><a href="#main-course">コース一覧</a></li>
                        <li><a href="#main-access">アクセス</a></li>
                    </ul>
                </nav>
            </div>
            <div class="copy">
                &copy; Copyright c test All Rights Reserved.
            </div>            
        </footer>
    </div>      
</body>

CSS

body {
    font-family: "Noto Sans JP", "游ゴシック", YuGothic, "メイリオ", Verdana, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
    font-size: 1.6rem;
    line-height: 1.75;
    color: #333;
    margin: 0;
    background-color: #FFF;
}

.wrapper{
    min-height: 100vh;
    position: relative;
    padding-bottom: 60px;  
    box-sizing: border-box;
}

li {
    list-style: none;
}

.container {
    padding: 2vw 20vw;
}

/* フッター */
#footer_navi {
    width: 100%;
    background-color: #ffff00;
    left: 0;
    right: 0;
    display: flex;
    justify-content: space-between;
    padding: 0 50px;
}

#footer_navi .logo {
    display: flex;
    align-items: center;
}

#footer_navi_menu {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#footer_navi_menu li {
  margin-left: 20px;
  text-align: center;
}

footer{
    width: 100%;
    position: absolute;
    bottom: 0;
}

footer .copy {
    background-color: #727171;
    color: #fff;
    text-align: center;
    padding: 2.0rem;
    font-size: 1.2rem;
}

.mt_small {
    margin-top: 2rem;
}

.mt_big {
    padding-top: 6rem;
}

.block_center {
    text-align: center;
}

.text_center {
    text-align: center;
}

/****************************** 
SP表示の指定
*******************************/
@media (max-width: 767px) {
    .container {
    padding: 2vw 5vw;
    }

    #footer_navi {
        display: block;
    }

    #footer_navi_menu {
        display: block;
    }
}

よろしくお願いいたします。

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

回答1件

ベストアンサー

ulの親要素(#navi)にflexを設定すればいいでしょう。

css
1#navi {
2    display: flex;
3    align-items: center;
4}

投稿2022/03/04 07:04

hatena19

総合スコア34352

mikeko0901

2022/03/04 07:06

中央になりました！ありがとうございます。

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

あなたの回答

tips

プレビュー

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

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

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

ただいまの回答率
85.31%

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

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

質問する

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

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

（CSS） ul要素を上下中央に配置したい

html

CSS

関連した質問