CODEWITHSUNDEEP
javascriptjqueryhtmlcsstwitter-bootstrap
MoHamed HaSsn
MoHamed HaSsn

Reputation: 555

Center Content Of Bootstrap Column

My question is how to center content of bootstrap column in center vertically, the problem is occurred when I set width: 100% and height: 100% for overlay div so what is the solution:

Example image of what I need to do:

enter image description here

Below is my code:

var coverSection = $(".cover-table");
    $(coverSection).height($(window).height());
.cover-table{
    display:table;
    width:100%;
    text-align:center;
    background-image:url("http://mlmconsultantsblog.com/wp-content/uploads/2010/02/man-working-on-laptop-dreamstime_7728015.jpg");
    background-size:cover;
    background-attachment:fixed;
    color:white;
    .cover-cell{
        display:table-cell;
        vertical-align:middle;
        .overlay{
            width:100%;
            height:100%;
            background-color:rgba(22, 22, 22, 0.80);
        }
    }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<section class="cover-table">
    <div class="cover-cell">
        <div class="overlay">
            <div class="container">
                <div class="row">
                    <div class="col-sm-12">
                        <div class="cover-nested">
                            <h4>Hello World</h4>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

Note: Please run code snippet in full page

Upvotes: 0

Views: 629

Answers (4)

hameeda naz
hameeda naz

Reputation: 287

Just add this CSS and text will align center.

CSS:

.cover-cell {
    display: table-cell;
    vertical-align: middle;
}

Upvotes: 0

Chris Happy
Chris Happy

Reputation: 7295

The secret code:

.overlay {
  height: 100vh;
  width: 100vw;
  position: relative;
  color: #fff;
  background: rgba(0, 0, 0, 0.5);
}

.overlay .container{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}


// Unneeded, see CSS note
//var coverSection = $(".cover-table");
//    $(coverSection).height($(window).height());
.cover-table {
  display: table;
  height: 100vh;
  /* This has the same effect as JS code. */
  width: 100%;
  text-align: center;
  background-image: url("http://mlmconsultantsblog.com/wp-content/uploads/2010/02/man-working-on-laptop-dreamstime_7728015.jpg");
  background-size: cover;
  background-attachment: fixed;
  color: white;
  .cover-cell {
    display: table-cell;
    vertical-align: middle;
    .overlay {
      width: 100%;
      height: 100%;
      background-color: rgba(22, 22, 22, 0.80);
    }
  }
}
.overlay {
  height: 100vh;
  width: 100vw;
  position: relative;
  color: #fff;
  background: rgba(0, 0, 0, 0.5);
}


.overlay  .container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<section class="cover-table">
  <div class="cover-cell">
    <div class="overlay">
      <div class="container">
        <div class="row">
          <div class="col-sm-12">
            <div class="cover-nested">
              <h4>Hello World</h4>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Upvotes: 0

Talent Runners
Talent Runners

Reputation: 419

As you are using display:table for .cover-table then you can set display:table-row to .cover-cell and display:table-cell vertical-align:middle to .overlay .

var coverSection = $(".cover-table");
    $(coverSection).height($(window).height());
.cover-table{
    display:table;
    width:100%;
    text-align:center;
    background-image:url("http://mlmconsultantsblog.com/wp-content/uploads/2010/02/man-working-on-laptop-dreamstime_7728015.jpg");
    background-size:cover;
    background-attachment:fixed;
    color:white;
}
.cover-cell{
  display:table-row;
}
.overlay{
  width:100%;
  height:100%;
  background-color:rgba(22, 22, 22, 0.80);
  display:table-cell;
  vertical-align:middle;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<section class="cover-table">
    <div class="cover-cell">
        <div class="overlay">
            <div class="container">
                <div class="row">
                    <div class="col-sm-12">
                        <div class="cover-nested">
                            <h4>Hello World</h4>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

Upvotes: 0

ab29007
ab29007

Reputation: 7766

Use flex. Edit the following in your cover-table:

.cover-table{
   display:flex;
   align-items:center;
   justify-content:center;
}

Here's a working snippet.

var coverSection = $(".cover-table");
    $(coverSection).height($(window).height());
.cover-table{
    display:flex;
    align-items:center;
  justify-content:center;
    width:100%;
    text-align:center;
    background-image:url("http://mlmconsultantsblog.com/wp-content/uploads/2010/02/man-working-on-laptop-dreamstime_7728015.jpg");
    background-size:cover;
    background-attachment:fixed;
    color:white;
    .cover-cell{
        display:table-cell;
        vertical-align:middle;
        .overlay{
            width:100%;
            height:100%;
            background-color:rgba(22, 22, 22, 0.80);
        }
    }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<section class="cover-table">
    <div class="cover-cell">
        <div class="overlay">
            <div class="container">
                <div class="row">
                    <div class="col-sm-12">
                        <div class="cover-nested">
                            <h4>Hello World</h4>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

Upvotes: 2

Related Questions