Question

我有一个带有不同子弹图像的无序列表，我试图将每个列表项的单词对齐为垂直居中。虽然我可以在Chrome和Safari中执行此操作，但vertical-align:top的效果无法在Firefox中正确显示。

我做了JS Fiddle right here。如何修改css，使单词在Firefox中每个项目符号的中间垂直显示？

我在这里复制JS Fiddle html代码：

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

Answer 1

在浏览器中获得一致结果的唯一方法是将列表图像应用为背景图片，因此您使用list-style-image: url("hotel.png");代替background-image: url("http://chinee.heroku.com/assets/hotel.png");并从那里开始。

这是一个例子： http://jsfiddle.net/dC7xr/

firefox中的vertical-align css

1 个答案: