Vertically aligning image and text on list items with CSS

Question

I am trying to vertically align an image on the left, and text on the right using the <li> to create two columns, like this:

space  space  space text1   space  space  space text1
space [image] space text2   space [image] space text2
space  space  space text3   space  space  space text3

space  space  space text1   space  space  space text1
space [image] space text2   space [image] space text2
space  space  space text3   space  space  space text3

Each image has a maximum of 100x100 pixels. They are different sizes. If the image is less than 100 by 100 it should align vertically and horizontally as shown above.

The issues:

Text will not go to the right of the image.
Image is aligned vertically but NOT horizontally.

It looks like this:

space   space space    space   space space 
[image] space space    [image] space space 
space   space space    space   space space
text1                  text1
text2                  text2
text3                  text3

space   space space    space   space space 
[image] space space    [image] space space 
space   space space    space   space space
text1                  text1
text2                  text2
text3                  text3

The total width where these image and text falls in is 530 pixels so there is plenty of room. The code is as follows.

For those who don't know Coldfusion, the CFQUERY is simply a loop for the number of items returned from a database query:

.hcr ul {
  padding: 8px 5px;
  margin: 0;
}
.hcr li {
  margin: 0;
  padding: 0;
  float: left;
  width: 240px;
  padding: 10px;
  overflow: hidden;
  zoom: 1
}
.hcr .wrap {
  width: 100px;
  height: 100px;
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  border: 1px solid #ddd
}
.hcr .image {
  width: auto;
  height: auto;
  max-width: 100px;
  max-height: 100px;
  vertical-align: middle;
}
.hcr img {
  float: left;
  display: inline;
  margin-right: 10px
}

<div class="hcr">
  <ul>
    <cfoutput query="querylist">
      <li>
        <span class="wrap">
    <a href="some.html"><img src="#image#" class="image"></a>
    </span>
        <a href="some.html">#text1#</a>
        <div>#text2#</div>
        <div>#text3#</div>
      </li>
    </cfoutput>
  </ul>
</div>

Any help is greatly appreciated. Thank you.

EDITED:

I resolved one of the issues for the text by wrapping the text portion with:

.hcr .wrap2 {
  width: 100px;
  height: 100px;
  display: table-cell;
}

<div class="hcr">
  <ul>
    <cfoutput query="querylist">
      <li>
        <span class="wrap">
       <a href="some.html"><img src="#image#" class="image"></a>
       </span>
       <span class="wrap2">  
       <a href="some.html">#text1#</a>
       <div>#text2#</div>
       <div>#text3#</div>
       </span> 
      </li>
    </cfoutput>
  </ul>
</div>

The image still will not center horizontally.

Thanks Michael for your inspiration. I have resolved it. See below with fiddle. — Jack, Aug 26 '16 at 01:01

score 3 · Answer 1 · edited May 23 '17 at 11:51

Considering that CSS float and table properties were not designed for building layouts, your code is overly complicated. Not that it's not possible, or even traditional and popular, it's just not the most simple or efficient way to accomplish the task.

If you're open to a more modern technique, building your layout will be simpler and easier. In particular, CSS3's Flexbox can be useful in this case.

.hcr li {
    display: flex;                   /* 1 */
    width: 240px;
    padding: 5px;
    border: 1px dashed black;
}

.wrap1 {
    align-self: center;              /* 2 */
    width: 100px;
    height: 100px;
    border: 1px solid #ddd;
}

.wrap2 {
    flex: 1;                         /* 3 */
    display: flex;                   /* 4 */
    flex-direction: column;          /* 5 */
    justify-content: space-around;   /* 6 */
    align-items: center;             /* 7 */
    border: 1px dashed red;
}

.hcr .image {
    width: auto;
    height: auto;
    max-width: 100px;
    max-height: 100px;
}

<div class="hcr">
  <ul>
    <cfoutput query="querylist">
      <li>
        <div class="wrap1">
          <a href="some.html">
            <img src="http://lorempixel.com/100/100/" class="image">
          </a>
        </div>
        <div class="wrap2"><!-- new container -->
          <a href="some.html">#text1#</a>
          <div>#text2#</div>
          <div>#text3#</div>
        </div>
      </li>
    </cfoutput>
  </ul>
</div>

Notes:

Establish flex container (child elements [aka, flex items] will line up in a row by default).
Image container (first child) will always be vertically centered in the parent container.
Text container (second child) will consume all remaining width of the parent container.
Establish nested flex container (in order to apply flex properties to children).
Child elements will align vertically.
Spread three text elements evenly.
Horizontally center column of text elements.

Browser support:

Flexbox is supported by all major browsers, except IE 8 & 9.

Some recent browser versions, such as Safari 8 and IE10, require vendor prefixes.

For a quick way to add all the prefixes you need, use Autoprefixer.

More details in this answer.

Thank you Michael. This may work. Unfortunately, I need to make it work with IE 6, 7, 8 and 9. I see there are still a lot of my visitors using them. Would Table be a better solution in this case? That's my last choice. — Jack, Aug 25 '16 at 19:54
If you need IE 6-9 support, tables are stable and reliable. I use tables all the time for HTML e-mails. They're still alive and kicking :-) — Michael Benjamin, Aug 25 '16 at 20:01
so you are saying there is no good way of doing it using regular CSS? — Jack, Aug 25 '16 at 20:10
No, I was responding to your question about tables. Like I said in my answer, there's possibly a way to build your layout with floats and table properties, and other pre-CSS3 properties. It's just not as efficient as modern methods. Since I can't test on IE 6-9, I hope somebody else can help you. — Michael Benjamin, Aug 25 '16 at 20:14

Jack · Accepted Answer · 2016-08-26T01:00:29.617

As in my edit, by wrapping the text portion with the following resolve one of the issues of text not moving to the right:

.hcr .wrap2 {
  width: 100px;
  height: 100px;
  display: table-cell;
}

<div class="hcr">
  <ul>
    <cfoutput query="querylist">
      <li>
        <span class="wrap">
       <a href="some.html"><img src="#image#" class="image"></a>
       </span>
       <span class="wrap2">  
       <a href="some.html">#text1#</a>
       <div>#text2#</div>
       <div>#text3#</div>
       </span> 
      </li>
    </cfoutput>
  </ul>
</div>

The second issue is resolved by removing the line float: left; from img

.hcr img {
  display: inline;
  margin-right: 10px
}

You can see it on fiddle It's not fully centered because of the 10px margin on the right for spacing between the image and the text.

Vertically aligning image and text on list items with CSS

2 Answers2