Расположение кнопки под текстом

350
19 мая 2018, 21:30
<section class="slider">
    <div class="carousel" id="carousel">
        <div class="carousel-item">
            <span class="banner__text">Unique and Modern Design 3</span>
        <span class="lg">Portfolio PSD Template</span>
        <span class="sm">Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.</span>
    <button href="#" class="btn btn--head">Get Started</button>
        </div>
        <div class="carousel-item">
            <span class="banner__text">Unique and Modern Design 3</span>
        <span class="lg">Portfolio PSD Template</span>
        <span class="sm">Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.</span>
        <button href="#" class="btn btn--head">Get Started</button>
        </div>
        <div class="carousel-item">
            <span class="banner__text">Unique and Modern Design 3</span>
        <span class="lg">Portfolio PSD Template</span>
        <span class="sm">Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.</span>
    <button href="#" class="btn btn--head">Get Started</button>
        </div>
    </div>
        <img src="img/arrow.svg" alt="" class="arrow arrow--left" onclick="prevSlide()">
        <img src="img/arrow.svg" alt="" class="arrow arrow--right" onclick="nextSlide()">
        <div class="dots">
            <div class="dots-item active"></div>
            <div class="dots-item"></div>
            <div class="dots-item"></div>
        </div>
</section>
.slider {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    background-attachment: fixed;
    background-size: cover;
    background-blend-mode: multiply;
    background-color: rgba(0, 0, 0, 0.5); 
    background: url("../../img/back.png") no-repeat center top;
}
.carousel {
    width: 300%;
    position: absolute;
    top: 0;
    left: 0%;
    height: 100%;
    display: flex;
    transition: .3s ease-out;
    text-align: center;
    -ms-align-items: center;
    align-items: center;
    margin: 381px 0;
}
.carousel-item {
    width: calc(100% / 3);
    height: 100%;
}
.carouserl-item img {
    width: 100%;
    height: 100%;
}
.arrow {
    width: 40px;
    height: 40px;
    position: absolute;
    z-index: 2;
    background-color: rgba(0, 0, 0, .3);
    padding: 15px;
    border-radius: 50%;
    top: calc(50% - 35px);
    cursor: pointer;
}
.arrow--left {
    left: 5%;
}
.arrow--right {
    right: 5%;
    transform: rotate(180deg);
}
.dots {
    position: absolute;
    display: flex;
    justify-content: center;
    z-index: 2;
    bottom: 20px;
    width: 100%;
}
.dots-item {
    width: 15px;
    height: 15px;
    background-color: rgba(0, 0, 0, .7);
    border-radius: 50px;
    cursor: pointer;
    margin: 0 5px;
    transition: .2s ease-out;
}
.dots-item.active {
    border: 2px solid rgba(0, 0, 0, .7);
    background-color: transparent;
}
.slider-item {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    display: none;
    animation: fade .3s ease-out;
}
.slider-item.active {
    display: block;
}
@keyframes fade {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

Слайдер работает как надо, но как расположить кнопку под текстом? Она у меня идет справа от .sm, надо чтоб по середине

Answer 1

Для button добавляете следующий стиль:

button { display: inline-block; position: absolute; top: 50px; left: 15%; }

Превосходно работает для десктопной версии. Для адаптивности нужно менять значения свойств. 

.slider { 
    position: relative; 
    width: 100%; 
    height: 100vh; 
    overflow: hidden; 
    background-attachment: fixed; 
    background-size: cover; 
    background-blend-mode: multiply; 
    background-color: rgba(0, 0, 0, 0.5);  
    background: url("../../img/back.png") no-repeat center top; 
} 
 
.carousel { 
    width: 300%; 
    position: absolute; 
    top: 0; 
    left: 0%; 
    height: 100%; 
    display: flex; 
    transition: .3s ease-out; 
    text-align: center; 
    -ms-align-items: center; 
    align-items: center; 
    margin: 381px 0; 
} 
 
.carousel-item { 
    width: calc(100% / 3); 
    height: 100%; 
} 
 
.carouserl-item img { 
    width: 100%; 
    height: 100%; 
} 
.arrow { 
    width: 40px; 
    height: 40px; 
    position: absolute; 
    z-index: 2; 
    background-color: rgba(0, 0, 0, .3); 
    padding: 15px; 
    border-radius: 50%; 
    top: calc(50% - 35px); 
    cursor: pointer; 
} 
 
.arrow--left { 
    left: 5%; 
} 
 
.arrow--right { 
    right: 5%; 
    transform: rotate(180deg); 
} 
 
.dots { 
    position: absolute; 
    display: flex; 
    justify-content: center; 
    z-index: 2; 
    bottom: 20px; 
    width: 100%; 
} 
 
.dots-item { 
    width: 15px; 
    height: 15px; 
    background-color: rgba(0, 0, 0, .7); 
    border-radius: 50px; 
    cursor: pointer; 
    margin: 0 5px; 
    transition: .2s ease-out; 
} 
 
.dots-item.active { 
    border: 2px solid rgba(0, 0, 0, .7); 
    background-color: transparent; 
} 
 
.slider-item { 
    position: absolute; 
    top: 0; 
    bottom: 0; 
    width: 100%; 
    height: 100%; 
    display: none; 
    animation: fade .3s ease-out; 
} 
 
.slider-item.active { 
    display: block; 
} 
 
@keyframes fade { 
    0% { 
        opacity: 0; 
    } 
    100% { 
        opacity: 1; 
    } 
} 
button { 
 
  position: absolute; 
  top: 50px; 
  left: 15%; 
}
голос «против» 
избранное 
<section class="slider"> 
    <div class="carousel" id="carousel"> 
        <div class="carousel-item"> 
            <span class="banner__text">Unique and Modern Design 3</span> 
        <span class="lg">Portfolio PSD Template</span> 
        <span class="sm">Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.</span> 
    <button href="#" class="btn btn--head">Get Started</button> 
        </div> 
        <div class="carousel-item"> 
            <span class="banner__text">Unique and Modern Design 3</span> 
        <span class="lg">Portfolio PSD Template</span> 
        <span class="sm">Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.</span> 
        <button href="#" class="btn btn--head">Get Started</button> 
        </div> 
        <div class="carousel-item"> 
            <span class="banner__text">Unique and Modern Design 3</span> 
        <span class="lg">Portfolio PSD Template</span> 
        <span class="sm">Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.</span> 
    <button href="#" class="btn btn--head">Get Started</button> 
        </div> 
    </div> 
        <img src="img/arrow.svg" alt="" class="arrow arrow--left" onclick="prevSlide()"> 
        <img src="img/arrow.svg" alt="" class="arrow arrow--right" onclick="nextSlide()"> 
        <div class="dots"> 
            <div class="dots-item active"></div> 
            <div class="dots-item"></div> 
            <div class="dots-item"></div> 
        </div> 
</section>

Answer 2

Как я предложил в комментарии обернуть просто в div

смотреть во весь экран

.slider { 
  position: relative; 
  width: 100%; 
  height: 100vh; 
  overflow: hidden; 
  background-attachment: fixed; 
  background-size: cover; 
  background-blend-mode: multiply; 
  background-color: rgba(0, 0, 0, 0.5); 
  background: url("../../img/back.png") no-repeat center top; 
} 
 
.carousel { 
  width: 300%; 
  position: absolute; 
  top: 0; 
  left: 0%; 
  height: 100%; 
  display: flex; 
  transition: .3s ease-out; 
  text-align: center; 
  -ms-align-items: center; 
  align-items: center; 
  margin: 381px 0; 
} 
 
.carousel-item { 
  width: calc(100% / 3); 
  height: calc(100% + 90px); 
} 
 
.carouserl-item img { 
  width: 100%; 
  height: 100%; 
} 
 
.arrow { 
  width: 40px; 
  height: 40px; 
  position: absolute; 
  z-index: 2; 
  background-color: rgba(0, 0, 0, .3); 
  padding: 15px; 
  border-radius: 50%; 
  top: calc(50% - 35px); 
  cursor: pointer; 
} 
 
.arrow--left { 
  left: 5%; 
} 
 
.arrow--right { 
  right: 5%; 
  transform: rotate(180deg); 
} 
 
.dots { 
  position: absolute; 
  display: flex; 
  justify-content: center; 
  z-index: 2; 
  bottom: 20px; 
  width: 100%; 
} 
 
.dots-item { 
  width: 15px; 
  height: 15px; 
  background-color: rgba(0, 0, 0, .7); 
  border-radius: 50px; 
  cursor: pointer; 
  margin: 0 5px; 
  transition: .2s ease-out; 
} 
 
.dots-item.active { 
  border: 2px solid rgba(0, 0, 0, .7); 
  background-color: transparent; 
} 
 
.slider-item { 
  position: absolute; 
  top: 0; 
  bottom: 0; 
  width: 100%; 
  height: 100%; 
  display: none; 
  animation: fade .3s ease-out; 
} 
 
.slider-item.active { 
  display: block; 
} 
 
.carousel-item div { 
  padding: 20px 0; 
  background:liteblue; 
} 
 
@keyframes fade { 
  0% { 
    opacity: 0; 
  } 
  100% { 
    opacity: 1; 
  } 
}
голос «против» избранное 
<section class="slider"> 
  <div class="carousel" id="carousel"> 
    <div class="carousel-item"> 
      <span class="banner__text">Unique and Modern Design 3</span> 
      <span class="lg">Portfolio PSD Template</span> 
      <span class="sm">Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.</span> 
      <div> 
        <button href="#" class="btn btn--head">Get Started</button> 
      </div> 
    </div> 
    <div class="carousel-item"> 
      <span class="banner__text">Unique and Modern Design 3</span> 
      <span class="lg">Portfolio PSD Template</span> 
      <span class="sm">Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.</span> 
      <div> <button href="#" class="btn btn--head">Get Started</button> </div> 
    </div> 
 
    <div class="carousel-item"> 
      <span class="banner__text">Unique and Modern Design 3</span> 
      <span class="lg">Portfolio PSD Template</span> 
      <span class="sm">Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.</span> 
      <div> 
        <button href="#" class="btn btn--head">Get Started</button> 
      </div> 
    </div> 
  </div> 
  <img src="img/arrow.svg" alt="" class="arrow arrow--left" onclick="prevSlide()"> 
  <img src="img/arrow.svg" alt="" class="arrow arrow--right" onclick="nextSlide()"> 
  <div class="dots"> 
    <div class="dots-item active"></div> 
    <div class="dots-item"></div> 
    <div class="dots-item"></div> 
  </div> 
</section>

READ ALSO
Кто шарит в скорости загрузки сайта [требует правки]
HTML

Кто шарит в скорости загрузки сайта [требует правки]

Стоил ли ставить на одностраничник на главную гифку размером 130 мб

 222
JQuery плавный переход
jQuery

JQuery плавный переход

Проблема с плавным переходом картинки, картинка просто меняется и всё, но не плавно

 424
Проблема с jquery json parse
jQuery

Проблема с jquery json parse

При попытке вывести полученный json jquery валится с ошибкой -

 225
Сократить код Jquery
jQuery

Сократить код Jquery

Можно ли как то сократить данный код ? Не очень силён в jquery Спасибо

 236