Vertically center li item to ul icon-CodePudding

I've added custom image as my ul, however I can't center vertically the text with the icon, it just stays at the bottom. Could someone advise how to deal with this?

Tried adding display flex and align items center to ul, but it wont work.

<ul >
  <li>Program</li>
</ul>

.list {
    list-style-image: url('img/list-circle.png');
}

CodePudding user response：

try this:

li div{
  display: flex;
  align-items: center;
height: 100%;
}

maybe if you have a div in the li that is 100% high you can center content inside using flex.

<ul >
  <li><div>Program</div></li>
</ul>

CodePudding user response：

The problem is that using list-style-image you cannot select the image in the style sheet to align with the text. A solution would be to use background-image for the li element and then use padding-left for your li.

ul.list {
  list-style-type: none;
  padding-inline-start: 0;
}

ul.list li {
  background-image: url(https://dummyimage.com/25/000/fff);
  background-repeat: no-repeat;
  line-height: 30px;
  padding-left: 30px;
}

<ul >
  <li>Program</li>
</ul>