无法在图像旁边的表格中间对齐自由文本块

Question

我发现大多数关于将图像或文本对齐到块中间的文章，我希望将整个文本块对齐到图像旁边的中间位置。演示可以在下面找到。如果我缩小屏幕的宽度，图像将放置在文本块旁边的中间，但是如果我加宽屏幕，则在块中的文本下填充空格，文本块不能在图像旁边的中间对齐。

演示：http://jsfiddle.net/yckelvin/3grb2vb3/

这是我的预期输出： 我的代码如下：

img.pimg {
    max-width:50%;
    display: block;
    margin-left: auto;
    margin-right: auto;
}
.product_row {
    display: table;
    width: 100%;
    margin-bottom: 20px;
    vertical-align: middle;
}
.product_img {
    display:table-cell;
    width: 40%;
    vertical-align: middle;
}
.product_desc {
    display:table-cell;
    width: 50%;
    overflow: visible;
    background-color: #FDF990;
    padding: 15px 20px 10px;
    font-size: 1.2em;
    color: #454545;
    -webkit-box-shadow: 10px 10px 31px -9px rgba(204, 226, 242, 1);
    -moz-box-shadow: 10px 10px 31px -9px rgba(204, 226, 242, 1);
    box-shadow: 10px 10px 31px -9px rgba(204, 226, 242, 1);
    border-radius: 20px 20px 20px 20px;
    -moz-border-radius: 20px 20px 20px 20px;
    -webkit-border-radius: 20px 20px 20px 20px;
    border: 0px solid #000000;
}

HTML

<div id="products_info">
    <div class="product_row">
        <div class="product_img">
            <img class="pimg" src="http://exmoorpet.com/wp-content/uploads/2012/08/cat.png">
        </div>
        <div class="product_desc">Block_A Block_A Block_A Block_A Block_A Block_A Block_A Block_A Block_A Block_A Block_A Block_A Block_A Block_A Block_A </div>
    </div>
    <div class="product_row">
        <div class="product_img">
            <img class="pimg" src="http://exmoorpet.com/wp-content/uploads/2012/08/cat.png">
        </div>
        <div class="product_desc">Block_B Block_B Block_B Block_B Block_B Block_B Block_B Block_B Block_B Block_B Block_B Block_B Block_B Block_B Block_B Block_B Block_B Block_B Block_B Block_B Block_B Block_B Block_B Block_B Block_B Block_B Block_B Block_B Block_B Block_B Block_B Block_B Block_B Block_B Block_B Block_B Block_B Block_B Block_B Block_B Block_B Block_B Block_B Block_B Block_B Block_B Block_B Block_B Block_B Block_B Block_B Block_B Block_B Block_B Block_B Block_B Block_B Block_B Block_B Block_B Block_B Block_B Block_B Block_B Block_B Block_B Block_B Block_B Block_B Block_B Block_B Block_B Block_B Block_B Block_B Block_B Block_B Block_B Block_B Block_B </div>
    </div>
</div>

Answer 1

工作示例： http://jsfiddle.net/3grb2vb3/6/

如果您不需要特定的CSS，这将适用于垂直居中的文字和图片。

HTML

<div>
    <img class="image" src="http://exmoorpet.com/wp-content/uploads/2012/08/cat.png"> 
    <span class="text">Block_A Block_A Block_A Block_A Block_A Block_A Block_A Block_A Block_A Block_A Block_A Block_A Block_A Block_A Block_A </span>
</div>

<强> CSS

.image {
    width:auto;
    height:auto;
    vertical-align: middle;
}
.text {
    vertical-align: middle;
    display:inline-block;
    width: 50%;
    overflow: visible;
    background-color: #FDF990;
    padding: 15px 20px 10px;
    font-size: 1.2em;
    color: #454545;
    -webkit-box-shadow: 10px 10px 31px -9px rgba(204, 226, 242, 1);
    -moz-box-shadow: 10px 10px 31px -9px rgba(204, 226, 242, 1);
    box-shadow: 10px 10px 31px -9px rgba(204, 226, 242, 1);
    border-radius: 20px 20px 20px 20px;
    -moz-border-radius: 20px 20px 20px 20px;
    -webkit-border-radius: 20px 20px 20px 20px;
    border: 0px solid #000000;
}

您可以在此处找到更多垂直对齐文字和图片的解决方案：Vertically align text next to an image?