Выравнивание текста и картинки в <ul>

Привет, есть список ul. В каждом li располагается картинка и текст. Необходимо, чтобы картинки выравнивались по левому краю, а текст по центру. Помогите, пожалуйста)

HTML
<ul class="main-list">
<li><img src="images/stethoscope.png">короткий текст</li>
<li><img src="images/clipboard.png">текст</li>
<li><img src="images/syringe.png">а это очень длинный текст</li>
</ul>

CSS
.main-list{
list-style:none; margin: 0 0 0 200px;
}
.main-list li{
display:block; float:left; font-size:24px; font-family:quicksand; background-color: rgba(230, 196, 17, 0.72); color:#000; margin:20px 0 0 0; padding: 10px 10px; width:600px; text-align: center;
}
.main-list li img{
vertical-align: middle;
}

Цитата ("FLAKE_MDM"):

.main-list li img{float: left;}

После этого нарушилось вертикальное выравнивание текста

kekzzzik, будьте добры почитать htmlbook.ru и поискать ответ на свои вопросы в гугле, прежде, чем донимать подобными вопросами. В простонародье то, чего вы добиваетесь, называется "разжевать и в рот положить"... не стыдно?

floppox, читал и искал, если бы нашел не спрашивал.

kekzzzik, а попробуйте почитать систематично. Изучить базовые свойства, их действие и побочные эффекты. Хотя бы, если вам посоветовали использовать float, то потрудитесь прочитать о нем, прежде, чем задавать новый вопрос.

floppox, пытаюсь и читаю. Просто я только начинаю изучать html/css - сразу много новой информации тяжело усвоить. Начал читать про float там понятие потока документа, одно за другое цепляется. Например, position:absolute выбивает элемента из потока. Если даже не знаешь о существовании чего-то то, о чем читать? Мне не понятна разница float и display: block/inline-block/table-cell и т.д... Видимо со временем уложится в голове

kekzzzik, у меня встречный вопрос. Если даже не знаешь о существовании чего-то (в данном случае основных свойств цсс), то зачем пытаться что-то сделать чужим умом?
Я дала вам ссылку на прекрасный сайт. Видите, там колонку слева? Вот пока все, что в ней есть, не пойдете хотя бы бегло, вы будете выглядеть идиотом, задавая такие вопросы в таких местах.
Ну, скажу я вам сейчас, что вам следует к тегу li применить свойство overflow:hidden. А что это вам даст? Да, сиюминутную задачу решите, а дальше придете с новыми вопросами, при чем, в аналогичной же ситуации?
Если информация из справочников вам не поддается, то ищите преподавателя. Благо, вариантов масса - от поступления в вуз, до репетиторства по скайпу.

Цитата ("floppox"):

к тегу li применить свойство overflow:hidden

Здесь оно зачем?

kekzzzik,

<li><img src="images/stethoscope.png"><span>короткий текст</span></li>

И со span'ом уже "танцуйте".

floppox, ну читал я про float, но голая теория не сильно двигает, пока на практике не сделаешь. Решив эту задачу сейчас с вашей помощью я попытаюсь понять, как это сработало (превосходно было если б сразу комментарий был). И так раз за разом научусь. А как учились вы если не секрет?

kekzzzik,


что тут не понятного?

Цитата ("starki"):

Цитата ("floppox"):

к тегу li применить свойство overflow:hidden

Здесь оно зачем?

Самый нормальный способ обойти слипание блока с флоатом внутри. Зачем там со спаном мудрить-то?

посилання -- первая же русскоязычная ссылка все отлично объясняет

floppox,
попробовал - ни твое ни мое нафик не нужно тут
Достаточно у li убрать - float:left
а img, наоборот, добавить float:left

А я предлагаю изображения поместить в background, а дальше додумывайте сами.

Я бы сделал через position и не волновался как это сделать через float и display:inline-bock

Starki возможно у li убирать float:left нельзя тк пункты идут горизонтально по порядку
NeoMurderer суровое решение

starki, floppox, оба варианты не работают как надо!
неужели в css это так проблематично...

kekzzzik, нет, проблематично это, если не иметь желания напрягать свои мозги.

Добавьте каждому элементу li свой класс и пропишите картинки через background