在 Bootstrap 的栅格系统中如何将文字垂直居中？

代码：

<div class="row text-center outer">
        <div class="col-sm-4">
            <img src="photo.jpg" alt="..." class="img-circle">
        </div>
        <div class="col-sm-8 text-left inner">
            <p>测试文字</p>
        </div>
</div>

尝试用过了vertical-align: middle，但不管是加在<div class="col-sm-8">上还是

上都没有用。

也在 Segmentfault 上和其他地方找过了一些方法，但都有些问题。

于是尝试用 jQuery 与 CSS：

$(document).ready(function() {
    $(window).resize(function() {
        $('.inner').css({
            margin-left: ($(window).width() - $('.inner').outerWidth()) / 2,
            margin-top: ($(window).height() - $('.inner').outerHeight()) / 2
        });
    });
    $(window).resize();
});
.inner {
    position: absolute;
    left: 50%;
    top: 50%;
}

.outer {
    position: relative;
}

结果虽然文字垂直居中了，但是又出现了新的问题：

整个页面右边出现了一条白边，用开发者工具看的时候发现这条白边在外面（？）

请问如何才能在不影响页面布局等的情况下将栅格中的文字垂直居中？非常感谢。