如何正確中心DIV中一個div

它需要反應靈敏，所以它似乎工作，直到你調整到一個較小的屏幕寬度和元素不成比例開始。這裏是一個的jsfiddle鏈接：https://jsfiddle.net/gn8L0rxu/如何正確中心DIV中一個div

我需要的「家滑塊字幕COL-SM-12」與它正確調整到不同的瀏覽器尺寸的中間嫌民建聯。

section.home-slider { 
 
    background-repeat: no-repeat; 
 
    background-position: center; 
 
    background-color: black; 
 
    -moz-background-size: cover; 
 
    -o-background-size: cover; 
 
    -webkit-background-size: cover; 
 
    background-size: cover; 
 
    min-height: 630px; 
 
    position: relative; 
 
} 
 

 
section.home-slider .home-slider-caption { 
 
    width: 60%; 
 
    position: absolute; 
 
    top: 50%; 
 
    right: 25%; 
 
    -moz-transform: translateY(-50%); 
 
    -ms-transform: translateY(-50%); 
 
    -webkit-transform: translateY(-50%); 
 
    transform: translateY(-50%); 
 
    z-index: 1; 
 
} 
 
section.home-slider h1 { 
 
    color: #fff; 
 
    letter-spacing: -4px; 
 
    font-size: 5em; 
 
    font-weight: 100; 
 
    line-height: 1; 
 
    text-align: center; 
 
} 
 
section.home-slider p { 
 
    font-size: 1.3em; 
 
    color: #fff; 
 
    margin-bottom: 20px; 
 
    text-align: center; 
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 
    
 
    <section class="home-slider" id="top"> 
 
     <div class="container"> 
 
      <div class="home-slider-caption col-sm-12"> 
 
       <h1>Sell Your Textbooks</h1> 
 
       <p>We'll pay top dollar for your used books!</p> 
 
       <a href="sell.html" class="btn btn-outline btn-primary btn-icon active btn-lg btn-rounded">Start Selling!<span class="fa fa-angle-right icon-with-btn"></span></a> 
 
      </div> 
 
     </div> 
 
    </section>

來源

2016-09-30 Albert

可能重複的http：/ /stackoverflow.com/questions/356809/best-way-to-center-a-div-on-a-page-vertically-and-horizontally –

如果我真正明白的問題，你必須這樣做：

section.home-slider .home-slider-caption { 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    -moz-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); 
    -webkit-transform: translate(-50%,-50%); 
    transform: translate(-50%,-50%); 
    z-index: 1; 
}

，不要使用同事*不.row

來源

2016-09-30 08:37:11

它非常完美，spasiba！我怎樣才能讓按鈕對齊呢？ – Albert

你wonna呢？ https://jsfiddle.net/gn8L0rxu/4/

Start Selling!

–

如何正確中心DIV中一個div

回答

相關問題