Question 249461 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – Align Text and Icons

I’m trying to align the text and the icon to be vertically aligned in my navbar. I made the icons inline with the text, but any padding that I give to it to separate the icon and text afterwards results in the icon disappearing.

Code

Navbar

I tried different display properties but it doesn’t seem to mesh well. The only thing that worked for was hardcoding icons which isn’t really fixing the problem.

Tags:

2

Answers


  1. 0

    You can add flex, items-center, gap-[specify the gap here] classes to the li tag.

    That’s will add the following properties to the li:

    display: flex;
align-items: center;
gap: [the specified gap];

    That should work properly.

    Login or Signup to reply.
  2. 0

    You need to use flex inside the list item, and wrap the text with span so it can be aligned the icon; without wrapping it, it will be aligned with beginning of line.

    So you need it like this:

    <li className="flex justify-center items-center space-x-1.5 p-1.5">
 <FiHome />
 <span>Home</span>
</li>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search