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>

修改：虽然接受了答案，但所有建议都有效。 profile-image-container与边缘一起玩，这就是造成问题的原因

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 vertical align中所述，您可以使用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>

可在this JS Fiddle上找到。

它似乎完全符合你的需要。

您使用的是什么版本的bootstrap？某些旧版本没有col-xs-offset-*个类（如this question中所述）。

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

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

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

代码

3 个答案: