I've got an unordered list with images as bullet points: ul { list-style: square outside url(image.png); padding: 0; margin: 0 0 0 50px; } li { margin: 0 0 5px 0; font-size: 1.1em; } Code (markup): Since the images are large, the list item cells are tall. The problem is, the text in each cell sits at the bottom of the cell. I can't seem to vertically align it. I've tried vertical-align: middle;. It pulls the text to the top of the cells in IE and does nothing at all in Firefox. How do I vertically align list item text?
Without a sample, I had to guess at some of the parameters. (Whether the pictures were the same size and the amount of text you're dealing with.) For a line of text that's shorter than the width, I usually use line-height for vertical centering. Here's some code that works in the big five browsers (Flowers.jpg attached): <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <style> ul { list-style: square outside url(image.png); padding: 0; margin: 0 0 0 50px; } li { margin: 0 0 5px 0; font-size: 1.1em; padding: 0; position: relative; } li span { width: 230px; line-height: 204px; text-align: center; position: absolute; left:0; top:0; margin:0; padding:0; color: #fff; } </style> </head> <body> <ul> <li><img src="Flowers.jpg" width="230" height="204" /><span>This is a small amount of text.</span></li> <li><img src="Flowers.jpg" width="230" height="204" /><span>This is a small amount of text.</span></li> <li><img src="Flowers.jpg" width="230" height="204" /><span>This is a small amount of text.</span></li> </ul> </body> </html> Code (markup):
You're looking for the line-height property, it's useful in vertically centering 1 line text. Trick is to set the line-height of the li, as the same as the height of the li (which is probably the height of the image).
ywp and wd_2k6, thanks for your attempts. One rep point each. Stomme Poes, I don't use tables. Let me explain my problem more clearly . . . Here's my list: Note that I have included borders round the <ul> and its <li>s. See how the text sits at the bottom of the cells? How do I vertically align the text to sit in the middle? I can't use line-height because, in many instances, the lines of text stretch for more than one line. Here's the code: ul { list-style: square inside url(tick.png); padding: 0; margin: 20px 40px; border: solid 1px; } li { margin: 0 0 5px 0; font-size: 1.1em; border: solid 1px green; } Code (markup): Here's a different list: As you can see, this time the images are outside, not inside. Once again, I've got the same problem: the text sits at the bottom of the <li> cells. I've also got another problem: the images are aligned with the top of the cells. How do I vertically align the images and text to sit in the middle? Here's the code: ul#sample_list { list-style: square outside url(tick.png); padding: 0; margin: 20px 40px 20px 80px; border: solid 1px; } ul#sample_list li { margin: 0 0 5px 0; font-size: 1.1em; border: solid 1px green; } Code (markup): I would appreciate some help very much. I've been stuck on this for two days.
Now I understand. The following code works in the big five browsers: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <style type="text/css"> ul#sample_list { [COLOR="Red"]/*list-style: square outside url(tick.png);*/[/COLOR] padding: 0; margin: 20px 40px 20px 80px; [COLOR="Red"]/*border: solid 1px;*/[/COLOR] } ul#sample_list li { margin: 0 0 5px 0; font-size: 1.1em; [COLOR="RoyalBlue"]border: solid 1px #00CC00; /* For the green colour */ list-style-type: none; background: url(tick.png) left no-repeat; padding: 27px 10px 27px 64px; } ul#sample_list li.noborder{ border: none; padding: 0 0 0 64px; } ul#sample_list li div{ /* An extra div when the image is outside. */ border: solid 1px #00CC00; padding: 27px 10px; }[/COLOR] </style> </head> <body> <ul id="sample_list"> <li>Lorem</li> <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce euismod commodo ante. Suspendisse potenti. Nunc pellentesque quam vel pede. Ut a lorem non urna molestie euismod. Fusce consequat tortor eu urna.</li> <li class="noborder"><div>Lorem</div></li> <li class="noborder"><div>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce euismod commodo ante. Suspendisse potenti. Nunc pellentesque quam vel pede. Ut a lorem non urna molestie euismod. Fusce consequat tortor eu urna.</div></li> </ul> </body> </html> Code (markup): Use an image editor to put padding in front of an image within a border. My bullet has a height of 54px so I have top and bottom padding of 27px (half) to prevent clipping. Use the same formula, if your bullet is taller than the desired (or default) line-height. Cheers!
A bloody brilliant response, Ywp! I would've given you another rep point for that. Unfortunately, because I gave you one just recently, I'm not allowed. Thanks a lot. Your suggestion worked just fine.