Добавление изображения к концу <li>с текстом, центрирование изображения по вертикали с текстом

Question

Я часто не использую CSS, поэтому каждый раз, когда я его использую, мне приходится снова экспериментировать и разбираться с вещами методом проб и ошибок.

То, что я пытаюсь сделать, это поместить icon_32 в ту же строку, что и «Я сделал это». Изображение имеет высоту 32px, поэтому я хотел немного переместить его вниз, чтобы отцентрировать его по линии.

Немного поэкспериментировав, я нашел решение, которое работает в Safari и Chrome, но не работает в Firefox.

Вот что я делаю:

CSS

ul, li {
    /* spacing */
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    /* list */
    list-style: none;
}

#work_list li {
    display: block;
    /* spacing */ 
    margin-bottom: 10px;
}

#work_list .icon_32 {
    display: inline-block;
    position: absolute; /* This doesn't work in Firefox. */
    cursor: pointer;
    /* spacing */
    margin-top: -8px;
    margin-left: 8px;
}

HTML

<ul id="work_list">
    <li> I made this. <div class="icon_32"></div></li>
    <li>I write, sometimes.</li>
</ul>

Поскольку нельзя добавить padding-top к встроенным элементам, я сделал положение иконки абсолютным. Проблема с тем, чтобы он был абсолютным, заключается в том, что я должен вручную установить margin-left, потому что значок не перемещается влево автоматически с текстом. Установив display на block на <li> и display на inline-block на значке, все, что я пытался достичь, сработало (хотя я не до конца понимаю, почему). Это, однако, не работает в Firefox (а я еще даже не тестировал в IE).

Есть ли правильный способ добиться того, что я пытаюсь сделать, который работает корректно во всех браузерах?

---

Обновление: Как я решил эту проблему, используя предложения из ответов. Большое спасибо за помощь!

Я не хотел использовать line-height, потому что хотел сохранить исходную высоту li. Я только что избавился от ненужного position: absolute и добавил vertical-align: middle. После этого изображение все еще влияло на высоту li, поэтому я просто добавил идентификатор к затронутому li и переписал margin-bottom, чтобы сумма его высоты + нижнего поля была равна сумме с li без изображения 32px.

Вот как это закончилось:

CSS

ul, li {
    /* spacing */
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    /* list */
    list-style: none;
}

#work_list li {
    display: block;
    /* spacing */ 
    margin-bottom: 10px;
}

#work_list #work_item_icon {
    margin-bottom: 3px;
}

#work_list span.icon_32 {
    display: inline-block;
    cursor: pointer;
    /* spacing */
    vertical-align: middle;
    margin-top: -8px;
    margin-left: 8px;
}

HTML

<ul id="work_list">
    <li id="work_item_icon">I made this. <span class="icon_32"></span></li>
    <li id="work_item_writing">I write, sometimes.</li>
</ul>

Answer 1

Есть много способов сделать это:

Вы можете использовать отрицательные поля, чтобы выровнять разницу между высотой строки и высотой изображения. Высота одной строки текста составляет 20 пикселей; поэтому margin-top: -6px и margin-bottom: -6px заставят изображение высотой 32px вести себя так, как если бы оно было 20px:

#work_list img.icon_32
{
    vertical-align: middle;
    margin-top: -6px;
    margin-bottom: -6px;
}
#work_list span.icon_32
{
    /* //// SPAN AS IMAGE \\\\ */
    display: inline-block;
    width: 32px;
    height: 32px;
    background-image: url(http://dummyimage.com/32x32/cf0/000&text=32x);
    /* \\\\ SPAN AS IMAGE //// */
    vertical-align: middle;
    margin-top: -6px;
    margin-bottom: -6px;
}

демо

Кроме того, вы можете установить высоту строки, равную высоте изображения, и установить vertical-align: middle для изображения. Вы можете отрегулировать несколько пикселей, используя отрицательную верхнюю границу:

ul, li
{
    line-height: 32px;
}
#work_list img.icon_32
{
    vertical-align: middle;
    margin-top: -4px;
}
#work_list span.icon_32
{
    /* //// SPAN AS IMAGE \\\\ */
    display: inline-block;
    width: 32px;
    height: 32px;
    background-image: url(http://dummyimage.com/32x32/cf0/000&text=32x);
    /* \\\\ SPAN AS IMAGE //// */
    vertical-align: middle;
    margin-top: -4px;
}

демо

Answer 2

Это также работает в firefox, также, пожалуйста, дайте position:relative вашему LI

или лучше отредактировать ваш HTML следующим образом:

<ul id="work_list">
    <li><span>I made this.<span> <div class="icon_32"></div></li>
    <li>I write, sometimes.</li>
</ul>

CSS:

li span, icon_32{
display:inline-block;
}

Answer 3

http://jsfiddle.net/9HeNy/

Создайте элемент icon_32 position : relative и его родительский элемент li line-height : 32px.Демо выше.

Документы для line-height: https://developer.mozilla.org/en/CSS/line-height

Answer 4

Укажите элемент, содержащий относительное положение значка div, и он будет позиционировать значок относительно этого контейнера.

Answer 5

Я думаю, что ваше решение будет line-height. Вы можете установить это на li, и текст будет центрироваться вертикально.

#work_list li {
    line-height: 32px;
}

#work_list .icon_32 {
    height: 32px;
    width: 32px;
}

Answer 6

Попробуйте добавить это правило CSS в свой li,

li {line-height: #px;}

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