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

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

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

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

HTML

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

CSS

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

Q&A

解決済

1回答

7190閲覧

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

itokin

総合スコア14

WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

HTML

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

CSS

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

0グッド

0クリップ

投稿2021/07/15 14:27

前提・実現したいこと

タイトルの通りです。
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;

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

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

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

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

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

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

Lhankor_Mhy

2021/07/16 01:44

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

回答1

0

ベストアンサー

スクリプトをご提示いただいていないので、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 }

投稿2021/07/16 01:59

Lhankor_Mhy

総合スコア35860

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

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

itokin

2021/07/16 09:28

flexの利用は盲点でした。参考になりました。ありがとうございます!!
Lhankor_Mhy

2021/07/16 10:02

お役に立てたようで何よりです。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問