CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Richard N. Sparrow
Richard N. Sparrow

Reputation: 59

Bootstrap row-fluid display: table with vertical-align?

I'm trying use a Bootstrap fluid row as a display table so I can center the child spans top to bottom.

Note: I will not know the height of the row or the height of the spans and don't want to use JavaScript.

Here's the html:

<div class="container-fluid">
    <div class="row-fluid vCenterParent">
        <div class="span6 left-style vCenterChild">
            <div>Left Side</div>
            <div>Left Side</div>
            <div>Left Side</div>
            <div>Left Side</div>
        </div>

        <div class="span6 right-style vCenterChild">
            <div>Right Side</div>
        </div>
    </div>
</div>

Here's the CSS:

.left-style {
    background-color: green;
}

.right-style {
    background-color: blue;
}

.vCenterParent {
    display: table !important;
}

.vCenterChild {
    display: table-cell !important;
    vertical-align: middle;
}

Here's the JSFiddle: http://jsfiddle.net/rsparrow/q2Ted/

(Note: The browser window for the running demo needs to be at least 750px to prevent the responsive design from kicking in)

I'd like the green and blue boxes to be centered top to bottom within the row.

Right now it looks like this:

enter image description here

I want it to look like this:

enter image description here

Upvotes: 0

Views: 4085

Answers (2)

Giovanni Silveira
Giovanni Silveira

Reputation: 1281

Considering that Prasanna's answer wasn't what you were looking for, I used his example to improve the answer to what you want.

I dont think there is a CSS way to do what you are trying to achieve here (at least not simply or exactly how you displayed)

$(document).ready(function() {
    var ver_top;
    if($('#left').height() > $('#right').height()) {
        ver_top = ($('#left').height() - $('#right').height()) / 2;
        $('#right').css( "margin-top", ver_top+'px' );
    }
    else if($('#left').height() < $('#right').height()){
        ver_top = ($('#right').height() - $('#left').height()) / 2;
        $('#left').css( "margin-top", ver_top+'px' );
    }
});

Mainly what we are doing is checking to see if #left or #right has a bigger height, and then add half of the difference in height between the two as margin-top on the smaller of the two. If they are the same, nothing is performed.

Should do exactly what you are looking for.

Fiddle

Upvotes: 0

Prasanna Aarthi
Prasanna Aarthi

Reputation: 3453

You will need to use jquery for this..

$(document).ready(function() {
var ver_top = ($(window).height() - $('#left').height()) / 2;
$('#left').css( "margin-top", ver_top+'px' );

var ver_top2 = ($(window).height() - $('#right').height()) / 2;
$('#right').css( "margin-top", ver_top2+'px' );

$(window).resize(function(){
    var ver_top = ($(window).height() - $('#left').height()) / 2;
    $('#left').css( "margin-top", ver_top+'px' );

    var ver_top2 = ($(window).height() - $('#right').height()) / 2;
    $('#right').css( "margin-top", ver_top2+'px' );
});

});

HTML CODE

<div class="container-fluid">
  <div class="row-fluid">
    <div id="left" class="span6" style="background: red;">
       <div>Left Side</div>
        <div>Left Side</div>
        <div>Left Side</div>
        <div>Left Side</div> 
    </div>
    <div id="right" class="span6" style="background: blue;">
      right side
    </div>
</div>

And the bootply link is here http://bootply.com/88320

Upvotes: 1

Related Questions