无法垂直居中Bootstrap 3.x .col-md-12中的图像

Question

Bootstrap 3.3.7

我无法让图像在.col-md-12内显示为垂直中心。我试过使用以下解决方案：

• Twitter Bootstrap 3: How to center a block
• How to align an image dead center with bootstrap
• How to vertically align an image inside a div?

标记很简单：

<footer class="footer">
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-12">
                <a href="#">About</a> | 
                <a href="#">Terms</a> |
                <a href="#">Privacy</a>

                <img class="pull-right hidden-xs hidden-sm" src="footer.jpg">

            </div>
        </div>
    </div>
</footer>

以下CSS应用于页脚：

.footer {
    height: 50px;
    line-height: 50px;
    background: red;
    font-size: 12px;
}

我试过了：

1. 将.center-block添加到img。这没什么。

2. 根据How to vertically align an image inside a div?在图片周围添加.frame并相应地调整宽度/高度值。这会将页脚“下方”的图像推到新行。

自然图像尺寸为265px宽，30px高。所以我假设页脚上有足够的高度（50px）才能工作。

图片显示在页脚的垂直顶部，而不在中间：



在这里小提琴：https://jsfiddle.net/0m3verv9/1/

我哪里错了？