Css 将图像和文本垂直居中

我正在使用Twitter引导和它的网格布局，在其中一列中，我试图将图像向右拉，并将文本也拉到图像旁边的右侧，同时它们都应该垂直居中。使用图像很容易——我使类img响应，并在该列中添加了填充，并向右拉动图像，使其处于良好的位置，但是无论我尝试什么，文本似乎都不会居中

我尝试将此应用于专栏：

.center{
    display : table-cell;
    vertical-align : middle;
    float:none;
}

<div class="col-md-3 col-xs-6 col-md-push-4 equalcolumn" id="namecolumn">
        <img class="pull-right img-circle img-responsive" id="myimage" src="http://upload.wikimedia.org/wikipedia/en/0/03/Super_Mario_Bros._box.png" alt="">
        <h4 class="pull-right" id="nametext">Welcome!</h4>
</div>

当只有文本时，它似乎起作用，但如果包含图像，则不会起作用

以下是我的专栏代码：

.center{
    display : table-cell;
    vertical-align : middle;
    float:none;
}

<div class="col-md-3 col-xs-6 col-md-push-4 equalcolumn" id="namecolumn">
        <img class="pull-right img-circle img-responsive" id="myimage" src="http://upload.wikimedia.org/wikipedia/en/0/03/Super_Mario_Bros._box.png" alt="">
        <h4 class="pull-right" id="nametext">Welcome!</h4>
</div>

---

谢谢

h4

是块元素，因此将其设置为

内联块

，并给出

垂直对齐：中间到
img
和
h4
，因此它们在
基线上彼此居中。

您需要创建两个包装器div，其值分别为
display:table
和
display:table cell
。然后您可以使用
垂直对齐：中间

演示

CSS

HTML


欢迎
如果要垂直居中浮动元素，如col-md-3等，请使用此示例
h4是块元素，因此将其设置为内联块，并给出垂直对齐：中间；对于img和h4，它们在基线上彼此居中。我试过了，但似乎仍然不起作用。如果有帮助，我已经设置了高度：12vh；对于所有的.equalcolumn，也许这会以某种方式干扰它？然后添加
.equalcolumn{line height:12vh；}
，并将
行高度
重置为
.equalcolumn*{line height:1.2em；}
的孩子的1.2em。因此，您只能有一行h4仍然需要设置为内联以避开img:）我不明白。我展示的概念示例可以应用于任何元素或元素组。他说他希望文本位于img的右侧，这就是我的评论：）
.wrapper {
    height: 100%;
    display: table;
}
.wrapper-inner {
    height: 100%;
    display: table-cell;
    vertical-align: middle;
}

<div class="wrapper">
    <div class="wrapper-inner">
    <div class="col-md-3 col-xs-6 col-md-push-4 equalcolumn" id="namecolumn">
        <img class="pull-right img-circle img-responsive" id="myimage" src="http://upload.wikimedia.org/wikipedia/en/0/03/Super_Mario_Bros._box.png" alt="" />
        <h4 class="pull-right" id="nametext">Welcome!</h4>
    </div>
</div>