Q&A
slick slideを設定した部分が中央に配置できないので、どうすればいいのか教えていただけますでしょうか。
下記2つを試しても左詰めになっていて動かずです。
1つ目
display: flex;
justify-content: center;
align-items: center;
2つ目
margin: 0 auto;
該当のソースコード
html
1<!DOCTYPE html> 2<html lang="ja"> 3 <head> 4 <meta charset="UTF-8" 5 <title></title> 6 <meta name="viewport" content="width=device-width"> 7 <meta name="description" content="ああああああ" 8 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ress@4.0.0/dist/ress.min.css"> 9 <link rel="preconnect" href="https://fonts.googleapis.com"> 10 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> 11 <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;500;700&display=swap" rel="stylesheet"> 12 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.9.1/font/bootstrap-icons.css"> 13 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" /> 14 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css"> 15 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.min.css"> 16 <link rel="stylesheet" href="F:\hp\style2.css"> 17 </head> 18 <body> 19 <header> 20 省略 21 </header> 22<main> 23<section class="dai"> 24 <div class="dai1">あああああああああああああ</div> 25 </section> 26 27<section class="naiyou"> 28 <div class="hidari"> 29 <div class="heya"> 30 <div class="heya1"> 31 あああああああああああ 32 </div> 33 <div class="heya2"> 34 <figure class="fig1"> 35 <img src="p.jpg" alt=""> 36 <figcaption> 37 ああああああああ 38 </figcaption> 39 </figure> 40 <figure class="fig2"> 41 <img src="s.png" alt=""> 42 <figcaption> 43 ああああああああああああ 44 </figcaption> 45 </figure> 46 <figure class="fig3"> 47 <img src="U.png" alt=""> 48 <figcaption> 49 ああああああああああああああ 50 </figcaption> 51 </figure> 52 </div> 53 </div> 54 </div> 55</main> 56<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> 57 <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script> 58 <script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script> 59 <script src="main.js"></script> 60 </body> 61 62</html> 63
css
1@charset "UTF-8"; 2 3body { 4 font-family: 'Noto Sans JP', sans-serif; 5 6} 7 8a,a:hover { 9 text-decoration: none; 10 color: #fff; 11} 12 13*{ 14 margin: 0; 15} 16 17header{ 18 display: flex; 19 justify-content: space-between; 20 width: auto; 21 height: auto; 22 background-color: deepskyblue; 23 position: sticky; 24 top:0; 25 left:0; 26 right: 0; 27 margin-left: auto; 28 margin-right: auto; 29 padding: 20px 15px; 30} 31 32.dai{ 33 display: flex; 34 justify-content: center; 35 align-items: center; 36 width: auto; 37 height: 357px; 38 background-image: url("094_l-1024x410.jpg"); 39 background-size: cover; 40} 41 42.dai1{ 43 display: flex; 44 font-size: 28px; 45 font-weight: 500; 46 color: aliceblue; 47} 48 49.heya1{ 50 border-bottom: 4px solid green; 51 border-width: thick; 52 margin: 20px; 53 display: inline-block; 54} 55 56.heya2{ 57 margin: 0 auto; 58} 59 60.fig1 img{ 61 max-width: 40%; 62 height: 40%; 63} 64 65.fig2 img{ 66 max-width: 40%; 67 height: 40%; 68} 69 70.fig3 img{ 71 max-width: 40%; 72 height: 40%; 73} 74
main.js
1$('.heya2').slick({ 2 autoplay: true, 3 autoplaySpeed: 800, 4 arrows: true, 5 dots: true, 6 fade: true, 7});
回答1件
0
ベストアンサー
Windows 11、Edge、Chromeで確認しました。
(Firefoxでは上手く表示できませんが、原因は調査していません)
以下の通りstyle2.cssに追記すると、slick slideが中央表示されます。
.heya1と.heya2のキャプションを中央表示するには、親要素.heyaに中央指定を追記します。
.heya{ text-align: center; }
.heya2の画像を中央表示するには、.fig1 img、.fig2 img、.fig3 imgにそれぞれ中央指定を追記します。
margin: 0 auto;
投稿2025/07/13 11:04
総合スコア1467
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2025/07/13 12:27