Css вертикальное выравнивание середины между двумя делениями с помощью Twitter начальной загрузки - PullRequest
Новая
       10

Css вертикальное выравнивание середины между двумя делениями с помощью Twitter начальной загрузки

0 голосов
/ 14 мая 2018

Я пытаюсь создать вертикальное выравнивание середины между двумя div, используя метод ячейки таблицы. Я хочу сделать одинарный ползунок div по вертикали по центру. Но я потерпел неудачу. Кто-нибудь может мне помочь? Я немного запутался по этому поводу. Вот мой код: 

.slider-area {
  height: 100%;
  width: 100%;
}

.silder-inner {
  height: 100%;
  display: table;
}

.single-silder {
  height: auto;
  display: table-cell;
  vertical-align: middle;
}
<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>

Ответы [ 2 ]

0 голосов
/ 14 мая 2018

Гибкий путь: 

body {
  margin: 0;
}

.slider-area {
  display: flex;
  height: 100vh;
}

.silder-inner {
  flex: 1;
  display: flex;
  align-items: center;
}
<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>
0 голосов
/ 14 мая 2018

Прежде всего, вы даете неправильный класс в своем HTML & CSS. single-slider в html и .single-silder в css. и вам также нужно установить height для тела и HTML. 

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>
...