slick.jsで実装したスライダーの画像を上下中央に揃えたい

前提・実現したいこと

タイトルの通りです。
5枚の高さの異なる画像の位置を親要素に対して中央に揃えたい

発生している問題・エラーメッセージ

一部のスライダー画像が高さが少ないため、枠内の中で見た目が上に寄っているように見える（画像2枚目参照）

該当のソースコード

HTML
1<!doctype html>
2<html lang="ja">
3  <head>
4    <meta charset="utf-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1">
6    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
7    <link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">
8    <link rel="preconnect" href="https://fonts.gstatic.com">
9    <link href="https://fonts.googleapis.com/css2?Family=Lato:wght@400;700&family=Noto+Sans+JP:wght@400;700&family=Noto+Serif+JP:wght@400;700&display=swap" rel="stylesheet">
10    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
11<link rel="stylesheet" type="text/css" href="<?php echo get_template_directory_uri(); ?>/slick/slick.css" media="screen" />
12<link rel="stylesheet" type="text/css" href="<?php echo get_template_directory_uri(); ?>/slick/slick-theme.css" media="screen" />
13<script src="<?php echo get_template_directory_uri(); ?>/slick/slick.min.js"></script>
14    <?php wp_head(); ?>
15  </head>
16(中略)  
17<div class="slider-bgc">
18    <div class="container slider-area"> 
19      <ul class="slider">
20        <li><img src="<?php echo get_template_directory_uri(); ?>/images/slider-image01.jpg" alt="子供服" class="img-fluid"></li> 
21        <li><img src="<?php echo get_template_directory_uri(); ?>/images/slider-image02.jpg" alt="コンサルタント" class="img-fluid"></li>
22        <li><img src="<?php echo get_template_directory_uri(); ?>/images/slider-image03.jpg" alt="エンジニアブログヘッダー" class="img-fluid"></li>
23        <li><img src="<?php echo get_template_directory_uri(); ?>/images/slider-image04.jpg" alt="車買取サイト" class="img-fluid"></li>
24        <li><img src="<?php echo get_template_directory_uri(); ?>/images/slider-image05.jpg" alt="ロッカー会社サイト" class="img-fluid"></li>
25      </ul>
26    </div>
27  </div>
28(中略)
29    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
30<?php wp_footer(); ?>
31  </body>
32</html>

css
1.slider-bgc {
2  background-color:#FFF9DE;
3  padding-bottom: 2rem;
4}
5.slider-area {  
6  height: 400px;
7  border: 2px solid  #000;
8
9}
10.slider{ 
11  height: 300px;
12  padding:2rem 0;
13  width:90%;
14  margin: 0 auto;
15
16}
17.slider img{
18  margin: 0 auto ;
19  max-height: 300px;
20  max-width: 90%;
21}
22

試したこと

css
1.slider{ 
2display:table;
3}
4.slider img {
5display:table-cell;
6}

上記のように行うと中の画像が見えなくなりました。また、

css
1vertical-align:center;

を入れましたが、特に変化がありませんでした。

Lhankor_Mhy

2021/07/16 01:44

slickを使っている部分のJavaScriptをご提示ください。

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

回答1件

ベストアンサー

スクリプトをご提示いただいていないので、slickの設定がわからず推測になりますが、フレックスレイアウトを使うのがよさそうな気がします。
以下のようにするとどうでしょうか？

css
1        .slider-area {
2            height: 400px;
3            border: 2px solid #000;
4            display: flex; /* 追加 */
5            align-items: center; /* 追加 */
6        }
7
8        .slider {
9            /*height: 300px; 削除*/
10            padding: 2rem 0;
11            width: 90%;
12            margin: 0 auto;
13
14        }
15
16        .slider img {
17            margin: 0 auto;
18            max-height: 300px;
19            max-width: 90%;
20        }
21
22        .slick-track { /* 追加 */
23            display: flex;
24            align-items: center;
25        }