1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Vertically Aligning List Item Content

Discussion in 'CSS' started by Masterful, Sep 13, 2009.

0
  1. #1
    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? :confused:
     
    Masterful, Sep 13, 2009 IP
  2. ywp

    ywp Peon

    Messages:
    96
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #2
    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):
     

    Attached Files:

    Last edited: Sep 13, 2009
    ywp, Sep 13, 2009 IP
    Masterful likes this.
  3. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #3
    This sounds like your list is in a table. But we don't know for sure.
     
    Stomme poes, Sep 14, 2009 IP
  4. wd_2k6

    wd_2k6 Peon

    Messages:
    1,740
    Likes Received:
    54
    Best Answers:
    0
    Trophy Points:
    0
    #4
    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).
     
    wd_2k6, Sep 14, 2009 IP
    Masterful likes this.
  5. Masterful

    Masterful Well-Known Member

    Messages:
    1,653
    Likes Received:
    28
    Best Answers:
    0
    Trophy Points:
    140
    #5
    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:

    [​IMG]

    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:

    [​IMG]

    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. :eek:
     
    Masterful, Sep 14, 2009 IP
  6. ywp

    ywp Peon

    Messages:
    96
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #6
    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!
     

    Attached Files:

    ywp, Sep 14, 2009 IP
  7. Masterful

    Masterful Well-Known Member

    Messages:
    1,653
    Likes Received:
    28
    Best Answers:
    0
    Trophy Points:
    140
    #7
    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. ;)
     
    Masterful, Sep 14, 2009 IP