CODEWITHSUNDEEP
csstwitter-bootstraptwitter-bootstrap-3rowvertical-alignment
RocketNuts
RocketNuts

Reputation: 11150

Vertically center content in a Bootstrap3 row?

I've got Bootstrap3 page, and somewhere halfway is a row with full display height. How do I center the row's content vertically?

I already tried the "vertical-align:center" css property, but that doesn't seem to work (neither does 'middle' instead of 'center').

Here's a small live demo, or as a standalone HTML example:

<!DOCTYPE html><html><head><meta charset='utf-8'>

<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css'>
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap-theme.min.css'>
<script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js'></script>

<style type='text/css'>
    .row { color:#ff0; }
    .bg1 { background:#007; }
    .bg2 { background:#060; }
    .special { background:#600; height:100vh; vertical-align:center; }
</style>

</head><body>

<div class="container-fluid text-center">

    <div class="row bg1">Top row<br><br></div>

    <div class="row bg2">Another row<br>With some content<br><br></div>

    <div class="row bg1">....Bla bla bla....<br>sadf asdf adsf asdf asdf<br><br></div>

    <div class="row special">
        <h2>Hello</h2>
        This should be vertically centered
    </div>

    <div class="row bg2">And here's yet another row<br><br></div>

    <div class="row bg1">The bottom row<br><br></div>

</div>

</body></html>

Upvotes: 0

Views: 9345

Answers (2)

Christina
Christina

Reputation: 34642

.row has negative margins for the columns, using without inner col-X-X is going to give you odd results. Read the docs on how to use the grid system.

There are a variety of ways of vertical-align:middle (not center) http://css-tricks.com/centering-in-the-unknown/

DEMO: http://jsfiddle.net/mLopevv8/

READ ME: Make another class for .row, remove .container-fluid, convert the parent of the vertically aligned middle content to a display:table and the child is now a display:table-cell.

CSS

.special { background:#600; height:100vh; display:table;width:100%;}
.v-m {display:table-cell;vertical-align:middle}

HTML

<div class="text-center">
   <div class="my-row bg1">Top row<br><br></div>
   <div class="my-row bg2">Another row<br>With some content<br><br></div>
   <div class="my-row bg1">....Bla bla bla....<br>sadf asdf adsf asdf asdf<br><br></div>
   <div class="my-row special">
      <div class="v-m">
         <h1>Hello</h1>
         This should be vertically centered!
      </div>
   </div>
   <div class="my-row bg2">And here's yet another row<br><br></div>
   <div class="my-row bg1">-- The bottom row --<br><br>
   </div>
</div>

Upvotes: 2

user1976940
user1976940

Reputation: 19

One way is to give the line height to the text which you want to place at the center vertically and horizontally ,but the line height should be equal to the half of the height of the div in which it is being placed.

            or

U can check out this link , this might help you: http://jsfiddle.net/jasongennaro/unfwL/1/

Upvotes: 0

Related Questions