CSS和HTML：Img垂直居中于一块文本

Question

我正在搜索垂直居中到这样一个文本块的图像：

http://tinypic.com/r/2w4e7ut/8

可能不使用表格？我在 WEB 上没有找到解决方案。

这是我尝试调整的stackoverflow解决方案的一部分：

http://goo.gl/rwu106

但没有成功。

Answer 1

根据您在问题中更新的小提琴，我在答案中添加了另一个选项。

现在在选项中，我使用了您在问题中添加的相同小提琴。

选项 1

要使“float:left”垂直居中对齐，您需要添加以下技巧

.parentDIV { 位置：相对； }

.child{ 向左飘浮; 位置：绝对； 边距：自动 0； 顶部：0； 底部：0； }

这是更新后的 CSS：

#content {
    margin-left: 210px;
    border:1px solid red;
    /* just to show the different boxes */
}
#theDiv {
    position:relative;
    background-color:#ccc;
    /* just to show the vertical align boxes */
}
#theDiv img {
    float: left;
    position:absolute;
    margin:auto 0;
    top:0;
    bottom:0;
    border:1px solid black;
    /* just to show the different boxes */
}
h3 {
    font-weight: bold;
    font-size: 200%
}

这是 更新的小提琴 相同的

http://jsfiddle.net/ewxn3/241/

================================================ ===========

选项 2 尝试对 DIV 使用“display:table 和 display: table-cell;”来创建垂直对齐的中间图像，但使用 DIV。

代码如下：

HTML

<div id="block">
    <div id="image">
        <img src="https://www.google.ca/images/srpr/logo11w.png" />
    </div>
    <div id="content">Some content goes here. Some content goes here.Some content goes here.Some content goes here.Some content goes here.Some content goes here. Some content goes here. Some content goes here.Some content goes here.Some content goes here.Some content goes here.Some content goes here. Some content goes here. Some content goes here.Some content goes here.Some content goes here.Some content goes here.Some content goes here.Some content goes here. Some content goes here.Some content goes here.Some content goes here.Some content goes here.Some content goes here.Some content goes here. Some content goes here.Some content goes here.Some content goes here.Some content goes here.Some content goes here.</div>
</div>

CSS

#block {
    width: 348px;
    display: table;
    padding:10px;
    background-color: #cccccc;
    /* just to see it vertically aligned */
}
#content {
    width: 364px;
    padding: 20px;
}
#image {
    width: 400px;
    display: table-cell;
    vertical-align: middle;
}
#image img {
    width:200px;
}

这是工作小提琴：http://jsfiddle.net/9o5scd6c/

让我知道这是否适合你！