Question

我正在使用Twitter Bootstrap及其网格布局，在一栏中，我试图将图像拉到右侧，并且文本也会在图像旁边向右拉，而它们应该都是垂直居中的。使用图像很简单 - 我使类img-responsive并在该列中添加了填充，并向图像右侧添加了它，因此它很好，但是文本看起来并不像我尝试的那样。

我尝试将其应用于专栏：

.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>

和CSS：

#namecolumn {
    padding: 1vh; 
}
.img-responsive {
height: 100%;
margin: 0 auto;
}

谢谢！

Answer 1

h4是一个块元素，因此请将其设置为inline-block并将vertical-align:middle;同时提供给img和h4，以便它们相互居中baseline。

#myimage, #nametext {
    display:inline-block;/* defaut display of img tag */
    vertical-align:middle;
}

Answer 2

您需要创建两个值为display: table和display: table-cell的包装器div。然后，您可以使用vertical-align: middle。

DEMO http://jsfiddle.net/Fa8Xx/1750/

CSS

.wrapper {
    height: 100%;
    display: table;
}
.wrapper-inner {
    height: 100%;
    display: table-cell;
    vertical-align: middle;
}

HTML

<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>

Answer 3

如果要垂直居中浮动元素（如col-md-3等），请使用此示例http://www.minimit.com/articles/solutions-tutorials/bootstrap-3-responsive-columns-of-same-height

垂直居中图像和文本

3 个答案: