vertical-align：middle不使用display：inline-block

Question

我正在尝试使文本显示为附图中所示。请看看我到目前为止所做的工作（包括代码）：http://jsfiddle.net/FLb6K/1/

我无法使用display: inline-block的原因是因为我希望能够轻松地从CSS更改元素的位置，而无需使用float触及HMTL。

例如，上图中有两个<div> s：一个有图像，一个有文本。使用CSS float我只需添加float: left

就可以让图片显示在左侧

Answer 1

然后使用display:table-cell;来实现您的目标。

Answer 2

如果你的文字总是一行文字，你可以设置一个行高与div的高度。

或者，显示：表;在文本所在的div上，文本元素显示：table-cell;垂直对齐中间

Answer 3

根据您要支持的浏览器，您可以使用变换垂直对齐。

假设你的包含div有一个高度设置，你想要居中的div有一个'vert-center'类：

.vert-center{
    border: 1px solid green;
    position: absolute;
    top: 50%;
    -webkit-transform: translate(0,-50%);
        -ms-transform: translate(0,-50%);
            transform: translate(0,-50%);
}

看到这个小提琴：http://jsfiddle.net/9J9xD/ 根据caniuse，浏览器支持率约为82％

这里有一篇关于css中心的好文章：http://coding.smashingmagazine.com/2013/08/09/absolute-horizontal-vertical-centering-css/

Answer 4

在代码下方使用：

<style>
div{border:solid 1px #000000; margin:5px; padding:5px;}
.maindiv{min-width:100px;height:300px;display:table-cell;vertical-align:middle;}
.div1{display:table-cell; vertical-align:middle;}
.div2{display:table-cell; vertical-align:middle;}
</style>

<div class="maindiv">
    <div class="div1">text</div>
    <div class="div2"><img class="div2" width="240" src="http://upload.wikimedia.org/wikipedia/commons/a/a5/ISO_639_Icon_hi.svg"></div>
</div>

Answer 5

您需要更改div顺序，删除浮动并显示两个元素：table-cell：

http://jsfiddle.net/chrissp26/FLb6K/7/

<强> CSS：

#abreast {
    background-color: green;
    height: 100%;
    width: 100%;
}
#abreast div {
    width: 50%;
    background-color: red;
}
#abreast div.left {
    display: table-cell;
    vertical-align: middle;
}
#abreast div.right {
    display: table-cell;
    vertical-align: middle;
}
#abreast div.right img {
    display: block;
    max-width: 100%;
}

<强> HTML：

<div id="abreast">
    <div class="left">
        <div>
            <p>Text Here</p>
        </div>
    </div>
    <div class="right">
        <img alt="image" src="http://taimapedia.org/images/5/5f/Placeholder.jpg">
    </div>
</div>