Twitter Bootstrap 3中的垂直居中

Question

I'm trying to figure out what is the best method in bootstrap 3 to align an element vertically.

I searched in the documentation and i didn't find any special class per the vertical align.

I would like that the text and the image are align vertically. any idea?

This is my jsfiddle http://jsfiddle.net/ttfgL6ns/1/

<div class="container-fluid">
    <div class="row">
        <div class="scenes green">
            <div class="col-xs-6 col-md-6">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do</div>
            <div class="col-xs-6 col-md-6">
                <img src="http://lorempixel.com/400/200" />
            </div>
        </div>
    </div>
</div>

Moreover, it is more correct to add a div before or after the div with the class row ( <div class "row" )?

thanks

Answer 1

using bootstrap you need to configure on DIV parent the height before. After that, on DIV child, you use top:50% like this:

<div class="container-fluid">
<div class="row">
    <div class="scenes green">
        <div style="height:200px;"> 
            <div class="col-xs-6 col-md-6" style="top: 50%;">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do</div>
            <div class="col-xs-6 col-md-6">
                <img src="http://lorempixel.com/400/200" />
            </div>
        </div>
    </div>
</div>

I hope it help you.

Answer 2

in your case margin- and padding- of scenes and green classes should drive the alignment style. the answer for better choice between before/after is irrelevant, "rows" just tells to the browser to render a responsive <table><tr> and all the children divs found with col- classes are splitted to responsive <td></td>

scenes and green styles before the class "row" apply the format to the same elements if declared after

Answer 3

Try with vertical-align: middle property works only for display: table-cell; element. Second thing is vertical align works only for display:inline; elements.

<div class="container-fluid">
    <div class="row">
        <div class="scenes green">
            <div class="col-xs-6 col-md-6">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do</div>
            <div class="col-xs-6 col-md-6 display-table-cell">
                <img src="http://lorempixel.com/400/200" />
            </div>
        </div>
    </div>
</div>

and your css

.display-table-cell {
    display: table-cell;
    vertical-allign: middle;
}
/* just to be sure img is inline */
.display-table-cell img {
    display: inline;
}

Answer 4

You need to add class "col-md-12 col-xs-12" to father of class col-md-6 col-xs-6 Like this:

<div class="scenes green col-md-12 col-xs-12">
        <div class="col-xs-6 col-md-6">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do</div>
        <div class="col-xs-6 col-md-6">
            <img src="http://lorempixel.com/400/200" />
        </div>
    </div>