bootstrap旋轉木馬中心標題，有一個按鈕

我想垂直對齊與一個按鈕到一個引導旋轉木馬的標題，並讓它圖像響應。我已閱讀線上工作的其他解決方案，除非他們有一個附加的按鈕。bootstrap旋轉木馬中心標題，有一個按鈕

看到這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

來源

2016-10-25 Holly Johnson

Aduuuu。請在codepen上精美地編寫代碼。如果你提供一個混亂的代碼，沒有人願意回答。 –

你究竟想要發生什麼？ –

垂直對齊圖片中的文本和按鈕 –

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
<div class="containter"> 
 
    <div class="carousel carousel-fade slide" id="my-carousel"> 
 
    <div class="carousel-inner"> 
 
     <div class="item active item-1"></div> 
 
     <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;"> MY Headline here</h1> 
 
      <button type="button" class="btn btn-primary">button</button> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

這裏是你如何可以用它實現Flexbox做。我重寫了其他樣式。

希望它有幫助。乾杯!

來源

2016-10-25 03:59:17

bootstrap旋轉木馬中心標題，有一個按鈕

回答

相關問題