Question

我正在尝试将带有按钮的标题垂直对齐到引导旋转木马中并使图像响应。除非他们有一个按钮，否则我已经阅读了其他解决方案。

请参阅此codepen。它有一只可爱的猫。

<div class="container">

<div class="carousel-caption " style="">
<h1 class="banner-text-size" style="font-size:40px;text-shadow: 1px 0 0 #000, 0 -1px 0 #000, 0 1px 0 #000, -1px 0 0 #000;"> After selling on Hempafy my Business has grown by 40%</h1>
<button type="button" class="btn btn-primary">button</button>

</div>  

</div

查看 http://codepen.io/anon/pen/gwELkd

Answer 1

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<div class="slideshow-contianer">
  <div class="slides">
    <img class="slide" src="https://unsplash.it/400/200?random" />
    <img class="slide" src="https://unsplash.it/400/200?random" />
    <img class="slide" src="https://unsplash.it/400/200?random" />
    <img class="slide" src="https://unsplash.it/400/200?random" />
    <img class="slide" src="https://unsplash.it/400/200?random" />
  </div>
  <div class="controller">
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
  </div>
</div>

＆＃13;

#my-carousel .carousel-inner {
  width: 100%;
  height: 500px;
  position: relative;
}

#my-carousel .carousel-inner .item {
  background: linear-gradient(rgba(0, 0, 0, 0.45), rgba(90, 90, 90, 0.45)), url(https://i.ytimg.com/vi/tntOCGkgt98/maxresdefault.jpg);
  background-size: cover;
  background-position: center top;
  -webkit-filter: blur(5px);
  -moz-filter: blur(5px);
  -o-filter: blur(5px);
  -ms-filter: blur(5px);
  filter: blur(5px);
  width: 100%;
  height: 100%;
}

#my-carousel .carousel-inner .container {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

#my-carousel .carousel-inner .container .carousel-caption {
  position: relative;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

@media (min-width:768px) {
  #my-carousel .carousel-inner .item {
    height: 500px
  }
}

@media (max-width:768px) {
  .banner-text-size {
    font-size: 30px!important;
    line-height: 40px;
  }
}

＆＃13;

在这里，您如何使用flexbox进行操作。我覆盖了其他风格。

希望它有所帮助。干杯！

bootstrap carousel中心标题，有一个按钮

1 个答案: