Вертикальное выравнивание-список с " list-style-image"

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

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

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

и 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;}

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

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

7
css html image list vertical-alignment

4 ответов

попробуйте некоторые вариации 

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

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

8
<html>
<head>
<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>
</head>
<body>
<ul>
<li>ABC 1</li>
<li>ABC 2</li>
<li>ABC 3</li>
<li>ABC 4</li>
</ul>
</body>
</html>

никогда не видел, чтобы кто-либо из наших дизайнеров пытался использовать list-style-image при реализации пользовательских значков для списка, я думаю, поэтому :)

1

Если я понял, ваша проблема в том, что текст кажется ниже базовой линии?

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

обивка-дно!--6-->

0

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

<ul class="rozcestnik">
  <li><a href="#" title="1">1</a></li>
  <li><a href="#" title="2">2</a></li>
  <li><a href="#" title="3">3</a></li>
</ul>

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;
}

согласно пользовательскому списку-изображению, вам, вероятно, просто нужно настроить верхнюю часть и размер ":перед" и заполнение "li".

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

0