How do I vertically align my list items with my custom bullet images?

Question

So I have an unordered list with custom bullet images. They are triangles pointing to the right at the list. I would like the point to be aligned with the vertical center of the first line of text in the list item. How can I achieve this?

This is what I am currently viewing:

main ul {
    list-style-image: url(../img/bullet.png);
    margin-top: 25px;
}
main ul li {
    line-height: 35px;
}

<ul>
    <li>Photography for events and portraits</li>
    <li>Image editing and restoration</li>
    <li>Video and audio production</li>
</ul>

The line-height doesn't seem to do anything.

Merci

Post your code in your question. – Hopson

We need to see your HTML and CSS to be able to help... an image is good for describing the visual issue but not to know what to change to fix it. One hint would be to reduce your image sizes or adjust your line heights – Permanganate

It's pretty self explanatory of what the code would be... but I updated it anyway. – Merci

May be a workaround: #1709333 – Krissykrista

main ul? That doesn't match with that HTML. – Heterochromatic

Answer 1

you can use pseudo-element before \ after instead, take a look at this example below:

main ul {
  margin-top: 25px;
}
main ul li {
  list-style: none;
}
main ul li:before {
  content: url("http://www.milksmarter.co.nz/images/basement_platform/grey_triangle_bullet_point_large.png");
  position: relative;
  top: 10px;
  left: -10px
}

<main>
  <ul>
    <li>Photography for events and portraits</li>
    <li>Image editing and restoration</li>
    <li>Video and audio production</li>
  </ul>
</main>

Feodore

Answer 2

It's really hard to actually provide you with finalized code without access to your image, but try merging the following code with your own. The first Padding value (currently 3px) should be the item you need to update.

li {
  background: url(images/bullet.gif) no-repeat left top;
  padding: 3px 0px 3px 10px;
  /* reset styles (optional): */
  list-style: none;
  margin: 0;
}

src: Adjust list style image position?

Noellanoelle

You may also be having some issues if the "main" in your CSS code (ie. main ul li) is referring to a class or ID. Make sure to use your appropriate selector prefix, like .main for a class and #main for an ID. Good luck! – Noellanoelle