垂直居中图像和文本

时间:2014-04-13 14:27:37

标签: css css3 twitter-bootstrap twitter-bootstrap-3

我正在使用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;
}

谢谢!

3 个答案:

答案 0 :(得分:1)

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

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

答案 1 :(得分:0)

您需要创建两个值为display: tabledisplay: 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>

答案 2 :(得分:0)

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