警报div旁边的Bootstrap vertical-align按钮

Question

我这里有一个自举网格，警报位于按钮旁边。 问题是该按钮与警报垂直对齐不正确：

<div class="row">
    <div class="col-md-6 col-md-offset-2 text-center">
        <div class="alert alert-info text-center">
        some Text
        </div>
    </div>
    <div class="col-md-4 text-left">
        <button type="button" class="btn btn-primary">Buttontext</button>
    </div>
</div>

http://www.bootply.com/BaNntnSJHI

任何想法如何解决？

Answer 1

不幸的是，没有简单的方法可以做到这一点，因为vertical alignment in CSS is a pain。如果您愿意使用表来执行此操作，那么您可以使用标准表垂直对齐以获得很好的效果;否则，你最好的选择可能是使用CSS表，但这本身会给你带来很多额外的布局痛苦，特别是如果警报可以拉伸到多行，而按钮可能不会那么高。

为了您自己的理智，我建议您只需将按钮放在警报内而不是旁边。更容易理解并假设按钮和警报在功能上相关，将它们视觉上分组可能更好地暗示连接。