lundi 20 avril 2015

Align two bootstrap rows vertically using offset

I want the 2 elements in the center to be aligned.

I thought that if the first row has: item(1 col)-item-(2 col)-item(offset 1) and second row has: item(offset 4) they will be aligned but they are not.

Could this be because of margins?

How can I make div of header.png and div of data.title vertically aligned?

The code

<div class="row">
    <div class="col-xs-1 col-xl-1 profile-image-container">
        <img class="img-responsive" src="{{data.owner_image}}"/>
    </div>
    <div class="col-xs-2 col-xl-2">
        <p>@{{data.owner_nick}}</p>
    </div>
    <div class="col-xs-2 col-xl-2 col-xs-offset-2 col-xl-offset-2 ">
        <img class="img-responsive" src="/img/moment/header.png"/>
        <!--<div class="moment-header-image"</div>-->
    </div>
</div>
<div class="row">
    <div class="col-xs-4 col-xl-4 col-xs-offset-4 col-xl-offset-4 moment-title">
        <p>{{data.title}}</p>
    </div>
</div>

Edit: Although accepting the answer accepted, all suggestions work. profile-image-container plays with the margins and that's what is causing the problems

Aucun commentaire:

Enregistrer un commentaire