将嵌套div垂直对齐并放大水平

Question

我正在使用光滑的滑块来获取最新的新闻。我必须显示父容器的叠加和新标题在垂直中间/中心对齐水平。我尝试使用flex css但是没有用。

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

function finishedScrolling() {
  return Ember.$('body').scrollTop() === 1000;
}

Ember.Test.registerWaiter(finishedScrolling);

Ember.$('body').animate({scrollTop: 1000});

andThen(function() {
  Ember.Test.unregisterWaiter(finishedScrolling);
  staticWiz.assertHasGoToTopButton(true);
});

不确定我在哪里做错了。我试图将显示类型用作table / table-cell

Answer 1

添加了相对于父div的位置，并且与孩子的位置相关的样式将起作用。

＆＃13;

＆＃13;

.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%;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

您在jquery初始化之前包含了slick 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 3

只需检查没有设置宽度

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;