I'm making a website and the link menu is going to have little animated bullets in front of every link. When coding, I simply placed the image in front of every link. However, instead of aligning to the middle of the text, the images align with the bottom of the text. I wanted to know if I can control the alignment of all my images through css. This is what I put in my stylesheet but it isn't having any effect:

IMG	   {align: middle}

Is there a way to do this? Or a way to define the "bullet" image and use a proper "list" for my links?

Thanks.

Hmmm...

This one is kind of tricky. As far as I know, you can't align middle relative to the text positioning. Aligning images relative to text, you can only use text-top and text-bottom. But, you can use vertical-align according to parent elements.

If you use:

IMG {vertical-align: middle; }

It'll align your image relative to its parent element. Theoretically (I haven't tested it out), you could do something like:

<STYLE>
#bullet { vertical-align: middle; }
</STYLE>

<DIV ID="bullet">
  <DIV><IMG SRC="image1.jpg">Link Text 1</DIV>
  <DIV><IMG SRC="image2.jpg">Link Text 2</DIV>
</DIV>

OR

You could use tables, since the default vertical alignment in table cells is middle.

<TABLE>
  <TR>
    <TD><IMG SRC="bullet1.jpg"></TD>
    <TD>Link Text 1</TD>
  </TR>
  <TR>
    <TD><IMG SRC="bullet2.jpg"></TD>
    <TD>Link Text 2</TD>
  </TR>
</TABLE>

Forgot to add, you could also use list-style-image to define images for your list items:

UL {
    list-style-image: url('image.jpg');
    list-style-type: circle;
}

You should always, when using list images, specify an alternate list style type.