css vertical align img and text (multiline) in <li> - html

Question

I did take a look at loot of similar questions here, but no one helped me solve my problem. I have a problem with vertically align the img on the left side in the li cell (this is working), but i can't align the text next to img. The line-height from ul li div is messing my things.
Here is a Jsfiddle.
What i wan't to achive is this:
Vertically and horizontally align img in 1/3 of the li cell on the left side.
Vertically and horizontally align text in 2/3 of the li cell, text align should be left. Text can be multiline and with bolded heading in first line.
You can also edit html code, if it is necessary.
HTML
<div class="product_banner_right">
<div class="product_banner_right title">
<h3>LOOK DOWN</h3>
</div>
<ul>
<li>
<img src="http://dummyimage.com/26x23/000/fff.png" alt="" />
<p><span>HEADING1</span>first line text
<br>second line text</p>
</li>
<li>
<img src="http://dummyimage.com/48x9/000/fff.png" alt="" />
<p><span>HEADING2</span>first line text</p>
</li>
<li>
<img src="http://dummyimage.com/40x24/000/fff.png" alt="" />
<p><span>HEADING3</span>first line</p>
</li>
<li>
<img src="http://dummyimage.com/46x17/000/fff.png" alt="" />
<p><span>HEADING4</span>first line text
<br>second line text
<br>third line text</p>
</li>
</ul>
</div>
CSS
.product_banner_right {
font-size: 1.2em;
position: relative;
width: 250px;
}
.product_banner_right .title {
height: 40px;
background: #1b3a6f;
}
.product_banner_right .title h3 {
text-align: center;
line-height: 40px;
}
.product_banner_right ul {
margin: 0;
padding: 0;
}
.product_banner_right ul li {
display: block;
height: 70px;
border: 1px solid black;
}
.product_banner_right ul li img {
vertical-align: middle;
padding: 0 10px;
max-width: 50px;
}
.product_banner_right ul li p {
vertical-align: middle;
display: inline-block;
}
.product_banner_right ul li p span {
font-weight: bold;
}

Answer 1

change the following styles to :
.product_banner_right {
font-size: 100%;
position: relative;
width: 250px;
}
.product_banner_right ul li img {
vertical-align: middle;
padding: 0 4%;
width: 11%;
max-width: 50px;
}
.product_banner_right ul li p {
vertical-align: middle;
display: inline-block;
width: 80%;
}
the result:

Answer 2

I have rewrote your html to accomodate the changes.
I have applied two options:
variable height list items.
fixed height list items with overflow.
Fixed height list items
CLICK FOR DEMO
This option is fully browser compatible but would require manually adjustment of the top margin for each list item.
Alternatively this option could still be used with the box flex model described below.
Fix height of list item and add scroll on overflow:
height:70px;
overflow:auto;
Variable height list items
CLICK FOR DEMO
This option relies on css3 flex box model:
display:flex;
display:-webkit-flex;
align-items:center;
-webkit-align-items:center;
justify-content:center;
-webkit-justify-content:center;
Please note flex box requires browser support. It is now highly compatible with modern browsers however old versions of the useless outdated browser ie will not support it.
Users of these browsers will still have a nice viewing experience however the images will be aligned at the top of each list box and not the center.

Answer 3

i don't know if this is the best approach but it looks allready a bit better than yours.
i just changed the following:
.product_banner_right ul li img {
vertical-align: middle;
padding: 0 10px;
/* CHANGED*/
width: 33%;
}
.product_banner_right ul li p {
vertical-align: middle;
display: inline-block;
/* CHANGED*/
width: 66%;
position:absolute;
}
but you still have to get the text to fit into the table.
hope it helped, cheers!

Answer 4

You can make the texts in separate classes and then arrange the as you wish using margin