Cannot align free text block in middle of table next to an image

Question

I found most articles about aligning image or text to middle in block, I expect to align the whole text block in middle next to an image. Demo can be found below. If I narrow the width of screen, the image is placed in middle next to the text block, but if I widen the screen, there is space filled under text in block and text block cannot be aligned in middle next to the image.

Demo: http://jsfiddle.net/yckelvin/3grb2vb3/

Here is my expected output: enter image description here My code is below:

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>

score 3 · Accepted Answer · edited May 23 '17 at 10:25

Working Example: http://jsfiddle.net/3grb2vb3/6/

If your specific CSS isn't need, this will work for vertically centering text and an image.

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;
}

You can find more solutions to vertically aligning text and images here: Vertically align text next to an image?

JSuar, thanks for your comment but if image is smaller than the area of text block, the image doesn't align in the middle. I experience it by changing the width and height to 10% instead auto for class .image — Kelvin, Nov 02 '14 at 03:16
@Kelvin, adding `vertical-align: middle;` to the `.text` class appears to handle the small image problem. Give it a look when you can. — JSuar, Nov 02 '14 at 03:29

Cannot align free text block in middle of table next to an image

1 Answers1