如何在图像旁边垂直居中

Question

除图像外，我如何将此按钮居中？ top:50%无效，因为父级没有固定大小

    <div class="row">
        <div class="col-xs-12 col-sm-2">
            <p style="padding:20px;"></p>
            <img src="img/logo.png" class="img-responsive">
        </div>
        <div class="col-xs-12 col-sm-2">
            <div class="btn-group btn-block" role="group">
                <a type="button" class="btn btn-block btn-warning" style="top:50%;">Sign in
                </a>
            </div>
        </div>
    </div>

以下是fiddle示例： https://jsfiddle.net/DTcHh/#&togetherjs=d6NLIis7u4

Answer 1

我在这个问题上使用了display: table，display: table-cell和vertical-align: middle技巧：

https://jsfiddle.net/qh7nrcyh/1/

请检查它是否适用于您。

Answer 2

使用css垂直居中的最佳方法是使用line-height。但这只有在你有一个固定的高度和一行文字时才有效。