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.
Step 2 – Add icon with text in li item
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.
Step 3 – Align vertically centered li item to UI icon
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.