Search code examples
htmlcssflexboxtailwind-cssweb-frontend

Why is my button stretched vertically when it includes a logo image?

I'm using tailwindcss. I have a flexbox container and a login button inside it. The button looks like it's being stretched.

<nav font-am class="m-6 text-xl">
      <div class="flex flex-row justify-between container">

        <div>
          <img src="./img/Logo.png">
        </div>

        <div class="flex flex-row">
          <a href="#"><img src="./img/AccountLog.png"></a>
          <p class="hidden md:flex">My Account</p>
        </div>

        <div class="flex flex-row">
          <a href="#"><img src="./img/love_symbol.png"></a>
          <p class="hidden md:flex">My List</p>
        </div>

        <div class="flex box-border flex-row">
          <a href="#"><img src="./img/LockLogo.png"></a>
          <button class="bg-darkPink hover:underline text-white font-bold py-2 px-4 rounded-full" role="button">Sign In</button>
        </div>

      </div>
    </nav>

Here is how it looks with the logo:

with logo

And the button is displayed normally when I delete the logo:

Without logo

What should I do to keep the button looks normal when the logo is on. Is the logo taking up too much space or something?

Solution

  • You've set your button as a stretched flex element in a flex row. You can do one of several things to fix it:

    • Align the row elements to center rather than stretching them. Here, '.self-center` seems to work nicely, though you could do it at the row level also.
    • Wrap the button in a div. This will make the div the stretched element, and you'll need to center the button vertically with other styles.

    Both solutions are shown here.

    .bg-darkPink {
  background: pink;
}
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css" integrity="sha512-wnea99uKIC3TJF7v4eKk4Y+lMz2Mklv18+r4na2Gn1abDRPPOeef95xTzdwGD9e6zXJBteMIhZ1+68QC5byJZw==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>

<nav font-am class="m-6 text-xl">
  <div class="flex flex-row justify-between container">
    <div class="flex box-border flex-row">
      <a href="#"><img src="https://via.placeholder.com/80"></a>

      <button class="bg-darkPink hover:underline text-white_disabled font-bold 
                     py-2 px-4 rounded-full self-center">Flex class</button>
    </div>

    <div class="flex box-border flex-row">
      <a href="#"><img src="https://via.placeholder.com/80"></a>

      <div class="flex flex-column items-center">
        <button class="bg-darkPink hover:underline text-white_disabled font-bold 
                       py-2 px-4 rounded-full">Flex div</button>
      </div>
    </div>
  </div>
</nav>