Heapcoding

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

Published June 21, 2022

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.

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

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.

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

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.

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

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.

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

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.

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

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