Twitter Bootstrap Question posted in

Css vertical align middle between two divs using twitter bootstrap

I am trying to create vertical align middle between two div using table cell method. I want to make single-slider div vertical align middle. But I am failed. Can anybody please help me? I have some confused about that.Here is my code:

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

2

Answers


  1. 0

    first of all you give wrong class in your html & css. it’s single-slider in html and .single-silder in css. and you also need to set height for body and 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>
    Login or Signup to reply.
  2. 0

    Doing it the Flex Way:

    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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search