As a beginner, I know this question has been asked numerous times, but I am struggling to find a straightforward answer that makes sense to me. I prefer not to use tables or flexbox, just plain CSS.
What I Need: I have an image and I want to vertically center multiple lines of text next to the image on the right.
My Attempts So Far: I tried placing the text inside a div with display: inline-block and styled both the image and div with vertical-align: middle.
The Issue: This approach seems to be working, but I'm puzzled about why it works. Do I really need to put the text inside a div? Is there a way to achieve this with less code? Also, keep in mind that the height of the image may vary based on the viewport width.
Check out this JS Fiddle https://jsfiddle.net/4LLruu7c/
img {
width: 40%;
margin-right: 30px;
vertical-align: middle;
}
.list_text {
display: inline-block;
width: calc(60% - 40px);
vertical-align: middle;
}<ul>
<li>
<img src="//placehold.it/200x200">
<div class="list_text">Client name
<br>Project title, description, and blurb</div>
</li>
</ul>