Twitter Bootstrap Question posted in

Vertical Centering in Twitter Bootstrap 3

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

Tags:

4

Answers


  1. 0

    using bootstrap you need to configure on DIV parent theheight 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.

    Login or Signup to reply.
  2. 0

    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

    Login or Signup to reply.
  3. 0

    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;
}
    Login or Signup to reply.
  4. 0

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

Back To Top
Search