ネストされたdivを縦横に整列します

Question

私は最新のニュース項目に滑らかなスライダを使用しています。私は親のコンテナをオーバーレイで表示し、新規のタイトルを中央/中央に垂直に&の位置に並べて表示する必要があります。フレックスCSSを使用しようとしましたが、うまくいきませんでした。

http://codepen.io/anon/pen/ZBZBYQ

<section class="regular slider "> 
    <div class="tb-parent"> 
    <img src="https://placeholdit.imgix.net/~text?txtsize=56&bg=ff0000&txtclr=000000&txt=600%C3%97400&w=600&h=400"> 
    <div class="tb-child">Project One Title <br> Project One Title</div> 
    </div> 

    <div> 
    <img src="http://placehold.it/600x400?text=2&bg=fff000&text=2"> 
    <div>Project TWO Title <br> Project One Title</div> 
    </div> 
    <div> 
    <img src="http://placehold.it/600x400?text=2&bg=fff000&text=3"> 
    <div>Project THREE Title <br> Project One Title</div> 
    </div> 
    <div> 
    <img src="http://placehold.it/600x400?text=2&bg=fff000&text=4"> 
    <div>Project FOUR Title <br> Project One Title</div> 
    </div> 
    <div> 
    <img src="http://placehold.it/600x400?text=2&bg=fff000&text=5"> 
    <div>Project FIVE Title <br> Project One Title</div> 
    </div> 
    <div> 
    <img src="http://placehold.it/600x400?text=2&bg=fff000&text=6"> 
    <div>Project SIX Title <br> Project One Title</div> 
    </div> 
</section> 

ない私が間違っているの場所を確認してください。私はテーブル/テーブルセルとして表示タイプを使用しようとしました

Answer 1

あなたはjqueryの初期化の前に滑らかなjsを含んでいます。滑らかなカルーセルを使用するには、まずjQueryをロードしてから、滑らかなjsをロードする必要があります。

Codepenをご覧ください。参考のために

---

：

あなたJS順序は次のようになります。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> 
<script src="http://kenwheeler.github.io/slick/slick/slick.js"></script> 

そして、あなたの矢印は、カルーセルの近くに来るようにするには、この追加のCSSを追加します。

.slick-next { 
    right: 10px; 
} 

.slick-prev { 
    left: 10px; 
} 

.tb-child { 
    text-align: center; 
} 

body { 
    margin: 0; 
} 

Answer 2

親divと位置関連スタイリングに関連する位置を子に追加すると機能します。

.slider { 
 
    max-width: 1280px; 
 
    margin: 50px auto; 
 
    padding: 0px 50px; 
 
} 
 

 
.slick-slide { 
 
    margin: 0px 0px; 
 
    border: 1px solid red; 
 
} 
 

 
.slick-slide img { 
 
    width: 100%; 
 
} 
 

 
.slick-prev:before, 
 
.slick-next:before { 
 
    color: black; 
 
} 
 

 
.tb-parent { 
 
    display: flex; 
 
    justify-content: center; 
 
    position: relative; 
 
} 
 

 
.tb-child { 
 
    display: block; 
 
    width: 10%; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    bottom: 0; 
 
    right: 0; 
 
    margin: auto; 
 
    height: 10%; 
 
}

<section class="regular slider "> 
 
    <div class="tb-parent"> 
 
    <img src="https://placeholdit.imgix.net/~text?txtsize=56&bg=ff0000&txtclr=000000&txt=600%C3%97400&w=600&h=400"> 
 
    <div class="tb-child">Project One Title <br> Project One Title</div> 
 
    </div> 
 

 
    <div> 
 
    <img src="http://placehold.it/600x400?text=2&bg=fff000&text=2"> 
 
    <div>Project TWO Title <br> Project One Title</div> 
 
    </div> 
 
    <div> 
 
    <img src="http://placehold.it/600x400?text=2&bg=fff000&text=3"> 
 
    <div>Project THREE Title <br> Project One Title</div> 
 
    </div> 
 
    <div> 
 
    <img src="http://placehold.it/600x400?text=2&bg=fff000&text=4"> 
 
    <div>Project FOUR Title <br> Project One Title</div> 
 
    </div> 
 
    <div> 
 
    <img src="http://placehold.it/600x400?text=2&bg=fff000&text=5"> 
 
    <div>Project FIVE Title <br> Project One Title</div> 
 
    </div> 
 
    <div> 
 
    <img src="http://placehold.it/600x400?text=2&bg=fff000&text=6"> 
 
    <div>Project SIX Title <br> Project One Title</div> 
 
    </div> 
 
</section>

Answer 3

だけであなただけの画像の上にタイトルやコンテンツが欲しいか、設定された幅

.slider { 
 
    max-width: 1280px; 
 
    margin: 50px auto; 
 
    padding: 0px 50px; 
 
} 
 

 
.slick-slide { 
 
    margin: 0px 0px; 
 
    border: 1px solid red; 
 
} 
 

 
.slick-slide img { 
 
    width: 100%; 
 
} 
 

 
.slick-prev:before, 
 
.slick-next:before { 
 
    color: black; 
 
} 
 

 
.tb-parent { 
 
    display: inline-block; 
 
    justify-content: center; 
 
    position:relative; 
 
} 
 

 
.tb-child { 
 
    align-self: center; 
 
    position:absolute; 
 
    right:0; 
 
    left:0; 
 
    margin:0 auto; 
 
    top:50%; 
 
    margin-top:-20px; 
 
    text-align:center; 
 
}

<section class="regular slider "> 
 
    <div class="tb-parent"> 
 
    <img src="https://placeholdit.imgix.net/~text?txtsize=56&bg=ff0000&txtclr=000000&txt=600%C3%97400&w=600&h=400"> 
 
    <div class="tb-child">Project One Title <br> Project One Title</div> 
 
    </div> 
 

 
    <div> 
 
    <img src="http://placehold.it/600x400?text=2&bg=fff000&text=2"> 
 
    <div>Project TWO Title <br> Project One Title</div> 
 
    </div> 
 
    <div> 
 
    <img src="http://placehold.it/600x400?text=2&bg=fff000&text=3"> 
 
    <div>Project THREE Title <br> Project One Title</div> 
 
    </div> 
 
    <div> 
 
    <img src="http://placehold.it/600x400?text=2&bg=fff000&text=4"> 
 
    <div>Project FOUR Title <br> Project One Title</div> 
 
    </div> 
 
    <div> 
 
    <img src="http://placehold.it/600x400?text=2&bg=fff000&text=5"> 
 
    <div>Project FIVE Title <br> Project One Title</div> 
 
    </div> 
 
    <div> 
 
    <img src="http://placehold.it/600x400?text=2&bg=fff000&text=6"> 
 
    <div>Project SIX Title <br> Project One Title</div> 
 
    </div> 
 
</section>