Kevin Powell - Community•2y ago

button with icon break vertical position alignment

I'm trying to keep two button on the same level, but the button with an icon in it breaks the vertical alignment. I've tried to Google for answer but I couldn't come up with the right keywords for this bug. Desired behaviour Two buttons stay on the same level vertically Actual behaviour The button with icon 'jumped' up from it's supposed position I'm using tailwindcss and lucide icons. I have not been very good at css and finding resources/solution related to css so any help is appreciated. Thanks in advanced! The Code

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Button with icon</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://unpkg.com/lucide@latest/dist/umd/lucide.js"></script>
  </head>
  <body>
    <div class="border border-red-500">
      <button
        class="text-md inline-flex h-9 items-center justify-center rounded-md bg-slate-500 p-2"
      >
        Button
      </button>
      <button
        class="text-md inline-flex h-9 items-center justify-center rounded-md bg-slate-500 p-2"
      >
        <i data-lucide="chevron-left"></i>With Icon
      </button>
    </div>
    <script>
      lucide.createIcons();
    </script>
  </body>
</html>

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Button with icon</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://unpkg.com/lucide@latest/dist/umd/lucide.js"></script>
  </head>
  <body>
    <div class="border border-red-500">
      <button
        class="text-md inline-flex h-9 items-center justify-center rounded-md bg-slate-500 p-2"
      >
        Button
      </button>
      <button
        class="text-md inline-flex h-9 items-center justify-center rounded-md bg-slate-500 p-2"
      >
        <i data-lucide="chevron-left"></i>With Icon
      </button>
    </div>
    <script>
      lucide.createIcons();
    </script>
  </body>
</html>

3 Replies

Mannix•2y ago

you can either change the size of the icon or put flex/inline-flex on the parent element of the buttons

Chris Bolson•2y ago

flex items-center gap-1 on the parent div will resolve your issue

EddieYOP•2y ago

Thanks @mannix_ and @Chris ! Flex solves the issue. Do you know why does the problem happen in the first place and how does flex solves it? It seems to be something to do with the icon height. I tried to shrink the size of the icon and the button starts going to the other direction.

Gaming

Programming

button with icon break vertical position alignment