View Full Version : align list to the top or middle?

Oct 25th, 2010, 01:49 PM
hi, on my site: http://www.thisisjag.co.uk/jag/default.asp

as you can see at the top right there are 4 MP3 tracks, how can I vertically align them?
I have tried the style vertical-align:top; but that doesn't work?!

Oct 25th, 2010, 02:52 PM
You could try something like this:

<li class="mp3" style="overflow: hidden;">
<object width="25" height="20" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" style="float: left;">
<param value="http://www.thisisjag.co.uk/jag/singlemp3player.swf?showDownload=true&amp;file=mp3/Walk Away.mp3&amp;autoStart=false&amp;backColor=&amp;frontColor=ffffff&amp;repeatPlay=no&amp;songVolume=50" name="movie"/>
<param value="transparent" name="wmode"/>
<embed width="25" height="20" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" src="http://www.thisisjag.co.uk/jag/singlemp3player.swf?showDownload=true&amp;file=mp3/Walk Away.mp3&amp;autoStart=false&amp;backColor=&amp;frontColor=ffffff&amp;repeatPlay=no&amp;songVolume=50" wmode="transparent" style="float: left;"/>
<span style="float: left; height: 20px; line-height: 20px; padding: 0 0 0 6px;">mp3/Walk Away.mp3</span>

Giving the LI an overflow hidden to expand for the floats. Floating the object and embed left. Wrapping the title in a span and floating it left. Applying a height with an equal line height to the span to vertically center the text. Finally adding a little left padding to the span for looks.