Question

我正在尝试使用表格单元格方法在两个div之间创建垂直对齐。我想让单滑块div垂直对齐中间。但我失败了。有人可以帮帮我吗？我对此感到困惑。这是我的代码：

＆＃13;

.slider-area {
  height: 100%;
  width: 100%;
}

.silder-inner {
  height: 100%;
  display: table;
}

.single-silder {
  height: auto;
  display: table-cell;
  vertical-align: middle;
}

＆＃13;

<div class="slider-area">
  <div class="silder-inner">
    <div class="single-slider">
      <div class="container">
        <div class="row">
          <div class="col-md-12">
            <h3>Holla You'r Welcome</h3>
            <h2>Best <span>Digital Agency</span> &<br>Business Farm</h2>
            <a href="" class="btn custom-btn slider-btn">Contract Now</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

＆＃13;

Answer 1

首先你要在你的html＆amp;中给出错误的课程。 CSS。它是html中的single-slider和css中的.single-silder。你还需要为body和html设置height。

body, html {
height: 100%;
width: 100%;
}
.slider-area{
height:100%;
width : 100%;
}
.silder-inner{
height:100%;
display:table;
}
.single-slider{
height:auto;
display:table-cell;
vertical-align:middle;
}

.mt-0 {
margin-top:0;
}

<div class="slider-area">
        <div class="silder-inner">
            <div class="single-slider">
                <div class="container">
                        <div class="row">
                            <div class="col-md-12">
                                <h3 class="mt-0">Holla You'r Welcome</h3>
                                <h2>Best <span>Digital Agency</span> &<br>Business Farm</h2>
                                <a href="" class="btn custom-btn slider-btn">Contract Now</a>
                            </div>
                        </div>
                    </div>
            </div>
        </div>
    </div>

Answer 2

以Flex方式进行：

＆＃13;

body {
  margin: 0;
}

.slider-area {
  display: flex;
  height: 100vh;
}

.silder-inner {
  flex: 1;
  display: flex;
  align-items: center;
}

＆＃13;

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="slider-area">
  <div class="silder-inner">
    <div class="single-slider">
      <div class="container">
        <div class="row">
          <div class="col-md-12">
            <h3>Holla You'r Welcome</h3>
            <h2>Best <span>Digital Agency</span> &<br>Business Farm</h2>
            <a href="" class="btn custom-btn slider-btn">Contract Now</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

＆＃13;

Css使用twitter bootstrap垂直对齐两个div之间的中间位置

2 个答案: