Align two bootstrap rows vertically using offset - html

Question

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

Answer 1

<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">
<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"></div>
<div class="col-xs-4 col-xl-4 moment-title">
<p>{{data.title}}</p>
</div>
</div>

Answer 2

As specified in the link css vertical align you can use css for vertically aligning the div.
div.class {
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}

Answer 3

I have slightly simplified you code:
<div class="container-fluid">
<div class="row">
<div class="col-xs-1">
<img class="img-responsive" src="http://www.zenimax.com/jpn/fallout3/images/avators/100x100falloutav-vb.gif" />
</div>
<div class="col-xs-2">
<p>Nick</p>
</div>
<div class="col-xs-2">
<img class="img-responsive" src="http://www.zenimax.com/jpn/fallout3/images/avators/100x100falloutav-vb.gif" />
</div>
</div>
<div class="row">
<div class="col-xs-4 col-xs-offset-3">
<p>Title</p>
</div>
</div>
</div>
It's available on this JS Fiddle.
It seems to do exactly what you needed.
What version of bootstrap are you using? Some older versions didn't have col-xs-offset-* classes (as stated in this question).
Apart from that, pay attention to size of your viewport. I usually only use col-xs-* only.
Last, check your custom (non-bootstrap) CSS. Perhaphs the override some rules?