Выровнять иконки и текст

[iahromenko]

Привет!

Делаю локальную стартовую страничку. Подскажите пожалуйста как выровнять иконки и текст, чтобы они были на одном уровне.

Пример для наглядности:

<style type=text/css media=all>

* {padding:0; margin:0;}
img {border: 0;}
table {border-collapse: collapse; border: none;}
table th, table td {font-weight: normal;}

a:focus {outline: none;}
a, a:hover {text-decoration: none; font: 12px arial; color: #464646;}
a:hover {text-decoration: underline;}

ul li {list-style: none; margin: 0 0 5px 0;}
ol li {list-style: decimal inside;}

html {height: 100%;}
body {height: auto !important; font: 12px arial; color: #000; line-height: 18px; }
#wrap {min-width: 985px; margin: 0 auto; width:expression((document.documentElement.clientWidth || document.body.clientWidth) < 985? "985px":"100%"); background: url(images/body-bottom.gif) bottom repeat-x;}

#content {padding: 15px;}

.tstyle1 {width: 100%;}
.tstyle1 td {width: 20%; padding: 0 0 25px 0; vertical-align: top;}

</style>

<div id="wrap">
	<div id="content">
		<table class="tstyle1">
			<tbody>
				<tr>
					<td>
						<ul>
							<li><img src="i/google.ico" /> <a href="http://google.ru/" >Google</a></li>
							<li><img src="i/google-mail.ico" /> <a href="https://mail.google.com/">GMail</a></li>
							<li><img src="i/google-reader.ico" /> <a href="http://www.google.com/reader/view/" >Reader</a></li>
							<li><img src="i/google-calendar.ico" /> <a href="https://www.google.com/calendar/" >Calendar</a></li>
							<li><img src="i/google-youtube.ico" /> <a href="http://www.youtube.com/" >YouTube</a></li>
							<li><img src="i/google.ico" /> <a href="http://maps.google.ru/" >Maps</a></li>
							<li><img src="i/google-translate.ico" /> <a href="http://translate.google.com/translate_t?hl=ru" >Translate</a></li>
						</ul>
					</td>
				</tr>
			</tbody>
		</table>
	</div>
</div>

[psywalker]

Сделать картинки одинакового размера, даже если есть пустота. Далее картинкам float:left; и отступ нужный сверху. Первый шаг возможно не понадобится.

[ShumNo]

Попробуйте у img отступ сверху сделать 2-3 пикселя

[Int]

А если поиграться с разными vertical-align?

Кстати, если всё равно есть таблица, почему бы строки не расположить в tr, к чему эти <ul><li>?

Edited January 9, 2011 by Int

[iahromenko]

Поигрался с vertical-align, добавил стиль:

li img {vertical-align: bottom;}

Более-менее выровнялось) Спасибо!