小编San*_*dro的帖子

我一直在努力让我的内容垂直对齐,但实际上并没有解决它.我尝试了adaptiveHeight参数,但它确实没有做我想要的.

小提琴:http://jsfiddle.net/fmo50w7n/400

这就是代码看起来像HTML:

<section class="slider">
    <div style="width:500px;height:200px">slide1</div>
    <div style="width:500px;height:300px;">slide2</div>
    <div style="width:500px;height:100px;">slide3</div>
</section>

CSS:

$c1: #3a8999;
$c2: #e84a69;

.slider {
    width: auto;
    margin: 30px 50px 50px;
}

.slick-slide {
    background: $c1;
    color: white;
    padding: 40px 0;
    font-size: 30px;
    font-family: "Arial", "Helvetica";
    text-align: center;
}

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

.slick-dots {
    bottom: -30px;
}


.slick-slide:nth-child(odd) {
     background: $c2;
}

JS:

$(".slider").slick({
    autoplay: true,
    dots: true,
    variableWidth:true,
    responsive: [{ 
        breakpoint: 500,
        settings: {
            dots: false,
            arrows: false,
            infinite: …

我正在尝试创建不同的类来进行对齐。

我希望能够像class="left bottom"使用该transform:translate属性一样将其组合起来。

问题在于该属性正在被彼此覆盖。

如果您查看我的小提琴并打开调试器，您会发现它translateX(50%)已被translateY(25%). 它们不应该像这样组合起来吗translate(50%,25%)？

.container {
  background: gray;
  height: 100px;
  width: 100%;
}
.left {
  transform: translateX(50%);
}
.bottom {
  transform: translateY(25%);
}

<div class="container">
  <div class="left bottom">
    I should be aligned
  </div>
</div>

https://jsfiddle.net/r2LmfqLs