Вопрос по html, vertical-alignment, list, image, css – Выравнивание по вертикали - список с «list-style-image»

7

Ни поиск в Google, ни просмотр в SO не помогли мне - надеюсь, кто-то здесь может решить эту проблему:

У меня есть следующий HTML:


ABC 1
ABC 2
ABC 3
ABC 4

и CSS

ul {list-style-image:url(../img/hook.png);}
li {vertical-align:middle;color:#FFFFFF;font-size:16px;text-shadow: 0em 0.13em 0.13em #2A2A2A;font-family:Helvetica,Arial,Sans-Serif;font-weight:normal;}

"hook.png» изображение имеет размер 32x35 пикселей, но всякий раз, когда я создаю элементы списка, под изображением всегда будет отображаться текст (например, ABC ...). Пробовал высоту строки и те 100% штуковины - но ни одна не сработала.

Любая быстрая помощь: /?

да - онине работает - просто увеличьте мои линии, но текст по-прежнему не выровнен по вертикали: середина к моим изображениям: / Kris
Вы пытались установить высоту каждого LI на 35 пикселей? Billy Moat
FYI:vertical-align применяется только к ячейкам таблицы. Chris Peters

Ваш Ответ

4   ответа
0

Я придумал что-то подобное, что может сэкономить вам время HTML:


  <a href="#" title="1">1</a>
  <a href="#" title="2">2</a>
  <a href="#" title="3">3</a>

CSS:

.rozcestnik {
    list-style-type: none;
    padding: 0;
    margin: 2.5em 2em 0;
}

.rozcestnik li:before {
    background: url("icon.png") no-repeat scroll 50% 50% transparent;
    content: " ";
    display: block;
    height: 20px;
    left: -20px;
    position: absolute;
    top: 0;
    width: 20px;
}
.rozcestnik li {
    position: relative;
    padding-bottom: 5px;
    padding-left: 5px;
}

Согласно пользовательскому списку-изображению, вы 'Возможно, вам просто нужно настроить верх и размер:до" и прокладкаЛи».

Он работает во всех основных браузерах и приложениях IE8 и более.

8

Попробуйте какой-то вариант

ul{
    background-image: url(../img/hook.png);
    background-repeat: no-repeat;
    background-position: 95% 50%;
}

Очевидно, что позиция вряд ли будет соответствовать вашим потребностям, но возиться с этим методом будет вашим лучшим выбором. 'скажу

vertical-align:middle является частью CSS и не являетсяне рекомендуется, Но ты'Совершенно верно, что реализация изображения элемента списка в качестве фонового изображения дает вам больший контроль над его вертикальным положением, чем.list-style-image Paul D. Waite
0

Попробуйте установить свойство beelow для вашего текста:

обивка-дно

1


<style>
ul
{
    list-style-image:none;
}
li
{
    color:#FFFFFF;
    font-size:16px;
    text-shadow: 0em 0.13em 0.13em #2A2A2A;
    font-family:Helvetica,Arial,Sans-Serif;
    font-weight:normal;
    line-height:35px;

    margin-bottom:5px;
    padding-left: 36px;
    background-image: url('../img/hook.png');
    background-repeat:no-repeat;
}
</style>


<ul>
<li>ABC 1</li>
<li>ABC 2</li>
<li>ABC 3</li>
<li>ABC 4</li>
</ul>


mage при реализации пользовательских значков для списка, наверное, поэтому :)

@ Крис, как вы можете видеть, они в основном делают это с фоновым изображением. Другие реализации I 'мы попадаемся просто <IMG> теги, но этов основном, когда 1 <уль> содержит несколько разных изображений (например, список файлов с иконками типа файлов перед ними) IvanL
Какой путь они пойдут тогда? Добавление изображения на каждый элемент li с помощью CSS? Kris
Ну, я просто удалил список и использовал DIV-классы с фоновым изображением и отступами ... думал, что список впечатлит больше, чем он должен быть ... но в итоге клиент выигралвсе равно, как этосделано -_- Kris

Похожие вопросы