Пользовательское положение изображения маркера вне текста

Question

Пользовательское положение изображения маркера вне текста

0

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

это мой HTML:

<div class="serviceticks">
    <ul>
        <li>Web Design</li>
        <li>HTML</li>
        <li>CSS3</li>
        <li>PHP5</li>
    <ul>
</div>

и это мой CSS

.serviceticks {
    vertical-align:middle;
    height: 100px;
    width: 95%;
}

    .serviceticks li {
        float: left;
        padding-right: 30px;
        padding-left: 10px;
        font-size: 20px;
        list-style-image: url('../images/white-tick.png');
    }

Кто-нибудь знает, как я получаю текст в соответствии с изображениями?

JoshuaBrand 17 апр. 2014, в 01:39

Источник

Теги:

html

css

html-lists

2 ответа

Ещё вопросы

swider · Answer 1 · 2014-04-16T21-52-00.000Z

Вы можете использовать vertical-align по vertical-align для изменения положения текста внутри линии. Чтобы он выглядел так, как вы хотите, вам нужно использовать свойство line-height чтобы установить доступное пространство на ту же высоту, что и изображение, которое вы используете.

Попробуйте добавить vertical-align: top; line-height: 35px; vertical-align: top; line-height: 35px; правилу li

neo108 · Answer 2 · 2014-04-16T21-51-00.000Z

Расширение от ответа @swider...

Следующее должно сделать это. Возможно, вам придется играть со значением line-height...

.serviceticks ul {
    list-style-image: url(images/white-tick.png);
}

.serviceticks li {
    vertical-align: top; 
    line-height: 50px;
}