In my project, I have created an unordered list with various bullet images and I am attempting to align the text for each list item vertically centered. Although this works perfectly in Chrome and Safari, I am encountering issues with Firefox where the vertical-align:top property is not displaying correctly.
I have prepared a sample on JS Fiddle, which you can view here. Can someone guide me on how to adjust the CSS so that the text appears vertically aligned in the middle of each bullet point in Firefox?
Below, I'm including the HTML code used in the JS Fiddle:
<ul>
<li>This is the first line</li>
<li>Here comes the second line</li>
<li>Third line featuring <a href="#">link</a></li>
</ul>
And here are the corresponding CSS styles from the JS Fiddle:
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");
}