無法對齊表格中間的自由文本塊

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?