使用偏移量垂直对齐两个引导行

Question

我希望中间的 2 个元素对齐。

我想，如果第一行有：item(1 col)-item-(2 col)-item(offset 1)和第二行有：item(offset 4)它们会对齐，但它们不是。

这可能是因为利润率吗？

如何使div of header.png和div of data.title垂直对齐？

代码

<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>

编辑：虽然接受答案，但所有建议都有效。配置文件图像容器会玩边距，这就是导致问题的原因

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

如链接 css 垂直对齐中指定的那样，您可以使用 css 垂直对齐div。

 div.class {
     position: relative;
     top: 50%;
     -webkit-transform: translateY(-50%);
     -ms-transform: translateY(-50%);
     transform: translateY(-50%);
   }

Answer 3

我稍微简化了你的代码：

<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>

它在这个JS小提琴上可用。

它似乎完全符合您的要求。

您使用的是哪个版本的引导程序？一些旧版本没有col-xs-offset-*类（如本问题所述）。

除此之外，请注意视口的大小。我通常只使用col-xs-*。

最后，检查您的自定义（非引导）CSS。也许覆盖一些规则？