在li内垂直对齐文本

Question

I have custom list item markers and when I displaying them text aligned in bottom . How to align it vertically in the center . Display flex and align items doesn't help. Here you can check in sandbox: https://codesandbox.io/s/spring-sun-1yx9k

li {
        list-style-position: outside;
        list-style-image: url("/static/images/list.svg");
    }

Answer 1

I had a similar issue not too long ago and solved it by using a background-image instead of list-style-image since you can't do much for alignment with those.

li {
        background-image: url(/static/images/list.svg);
        background-repeat: no-repeat;
        background-position: left;
        list-style-type: none;
        padding: 15px 0 15px 50px;
    }

Answer 2

What about adding a height to the li element eg

li {
  height: whateverValueYouWant;
  line-height: whateverValueYouPut;
}

So that it centers it vertically.