How to set vertically center li item to UI icon in CSS

In this tutorial I shall show you How to set vertically center li item to UI icon in CSS.

Let’s start without wasting your time.

Step 1 – Create Ul and add li elements to it

First of all create a ul and add li elements in the ul list like the screenshot below.

Now let’s add an icon with text in the li item as shown in the screenshot below.

In the above screenshot you can see I have added an image in li and a span with text.

And now see the rendered code in the web browser in the screenshot below.

Now let’s add some css to vertically align the center li item to the ui icon using flexbox.

In the above screenshot you can see I have added flex property to the li item and aligned items to center.

And added some margin and width to the UI icon image which is present in the li item.

Now take a look at the web browser to see if we aligned the centered li item to the UI icon.

In the above screenshot you can see that we have successfully aligned vertically center li item to UI icon.