How do I vertically align my list items with the bullets?

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:

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

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

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

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 — blurfus, Oct 16 '15 at 21:10
It's pretty self explanatory of what the code would be... but I updated it anyway. — ShoeLace1291, Oct 16 '15 at 21:17
May be a workaround: http://stackoverflow.com/questions/1708833/adjust-list-style-image-position — Mathijs Rutgers, Oct 16 '15 at 21:20

score 0 · Answer 1 · edited May 23 '17 at 11:44

0

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?

edited May 23 '17 at 11:44

Community

1
1

answered Oct 16 '15 at 21:29

CodeLyfe

232
2
11

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! – CodeLyfe Oct 16 '15 at 21:31

score 0 · Accepted Answer · answered Oct 16 '15 at 21:33

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>

Worked perfectly! Thanks! – ShoeLace1291 Oct 16 '15 at 21:38 — ShoeLace1291, Oct 16 '15 at 21:38

How do I vertically align my list items with the bullets?

2 Answers2

Linked