Question

它需要具有响应性，因此它似乎有效，直到您调整到较小的屏幕宽度并且元素以不成比例的方式启动。这是一个JSfiddle链接：https://jsfiddle.net/gn8L0rxu/

我需要在中间点击“home-slider-caption 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>

Answer 1

如果我真的理解问题，你必须这样做：

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

并且不使用col- *而不使用.row

如何正确地将一个Div划分为一个Div

1 个答案: