CODEWITHSUNDEEP
htmlcss
Learning
Learning

Reputation: 20001

Align nested div in center vertically & horizontally

I am using slick slider to latest news items. i have to show parent container with overlay and title of the new aligned in middle/center vertically & horizontally. I tried to use flex css but that did not work.

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>

Not sure where i am doing wrong. I tried to use display type as table/table-cell also

Upvotes: 2

Views: 1247

Answers (3)

Jishnu V S
Jishnu V S

Reputation: 8409

just check with this without set width 

.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>

Upvotes: 0

aavrug
aavrug

Reputation: 1889

Added position relative to parent div and position related styling to child will work.

.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>

Upvotes: 1

Saurav Rastogi
Saurav Rastogi

Reputation: 9731

You are including slick js before jquery initialization. To use slick carousel you need to load the jQuery first and then the slick js.

Have a look at the updated Codepen.

For Reference:

Your JS order should be:

<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>

And add this additional CSS to make your arrows come in near the carousel:

.slick-next {
  right: 10px;
}

.slick-prev {
  left: 10px;
}

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

body {
  margin: 0;
}

Upvotes: 0

Related Questions