Блог

У меня есть неупорядоченный список с разными изображениями маркеров, и я пытаюсь выровнять слова для каждого элемента списка по вертикали по центру. Хотя я могу сделать это в Chrome и Safari, эффект для vertical-align:top не отображается должным образом в Firefox.

Я сделал скрипку JS прямо здесь. Как я могу изменить CSS, чтобы слова отображались вертикально в середине каждого маркера в Firefox?

Я копирую HTML-коды JS Fiddle здесь:

 <ul>
    <li>Here is line one</li>
    <li>Here is line number two</li>
    <li>three with <a href="#">link</a></li>
</ul>
  

Я копирую коды JS Fiddle css здесь:

 ul li a {
    line-height: 40px;
    vertical-align: top;
}

ul li {
    font-family: Arial,"MS Trebuchet",sans-serif;
    font-size: 12px;
    line-height: 40px;
    margin-left: 60px;
    margin-top: 20px;
    vertical-align: top;
}

ul li:first-child {
    list-style-image: url("http://chinee.heroku.com/assets/venue.png");
}

ul li:nth-child(2){
        list-style-image: url("http://chinee.heroku.com/assets/airport.png");
}

ul li:nth-child(3){
        list-style-image: url("http://chinee.heroku.com/assets/hotel.png");
}
  

Единственный способ получить согласованные результаты во всех браузерах — это применить изображения списка в качестве фоновых изображений, поэтому вместо list-style-image: url("hotel.png"); вы используете background-image: url("http://chinee.heroku.com/assets/hotel.png") ; и расположите их оттуда.

Вот пример:http://jsfiddle.net/dC7xr /