Search code examples
cssreactjsnext.jstailwind-csscentering

Vertically center text on the button

I am trying to center this text vertically on the button and it's driving me crazy. I've spent a day on this problem and couldn't find the solution. I am using NEXT.js and TailwindCSS. Text is a bit off the center vertically here

<main>
  <div class='flex justify-center items-center h-screen'>
    <div class='bg-zinc-700 h-[610px] w-[340px] rounded-2xl flex justify-center'>
      <ul>
        <li>
          <div class='bg-black h-[100px] w-[275px] rounded-2xl shadow-2xl translate-y-11'></div>
        </li>
        <li>
          <div class='flex justify-center items-center h-[50%] translate-y-32 flex-row'>
            <ul>
              <li>
                <ul class='flex flex-row w-full'>
                  <li class='pr-6 text-3xl text-black'><button class='w-12 h-12 bg-gray-300 shadow-lg rounded-full'><p class='inline'>c</p></button></li>
                  <li class='pr-6 text-3xl text-black'><button class='w-12 h-12 bg-gray-300 shadow-lg rounded-full'>÷</button></li>
                  <li class='pr-6 text-3xl text-black'><button class='w-12 h-12 bg-gray-300 shadow-lg rounded-full'>x</button></li>
                  <li class='text-3xl text-black'><button class='w-12 h-12 bg-gray-300 shadow-lg rounded-full'>+</button></li>
                </ul>
              </li>
            </ul>
          </div>
        </li>
      </ul>
    </div>

  </div>
</main>

<script src="https://cdn.tailwindcss.com"></script>

Thanks

Solution

  • Yep, super annoying. You can brute force it a bit by adding a class to nudge up the element by 0.25rem (I've added a class called .nudgeup and wrapped the symbols in p tags.

    <style>
  .nudgeup { position:relative; bottom:0.25rem; }
</style>
<main>
  <div class='flex justify-center items-center h-screen'>
    <div class='bg-zinc-700 h-[610px] w-[340px] rounded-2xl flex justify-center'>
      <ul>
        <li>
          <div class='bg-black h-[100px] w-[275px] rounded-2xl shadow-2xl translate-y-11'></div>
        </li>
        <li>
          <div class='flex justify-center items-center h-[50%] translate-y-32 flex-row'>
            <ul>
              <li>
                <ul class='flex flex-row w-full'>
                  <li class='pr-6 text-3xl text-black'><button class='w-12 h-12 bg-gray-300 shadow-lg rounded-full'><p class='inline nudgeup'>c</p></button></li>
                  <li class='pr-6 text-3xl text-black'><button class='w-12 h-12 bg-gray-300 shadow-lg rounded-full'><p class='nudgeup'>÷</p></button></li>
                  <li class='pr-6 text-3xl text-black'><button class='w-12 h-12 bg-gray-300 shadow-lg rounded-full'><p class='nudgeup'>x</p></button></li>
                  <li class='text-3xl text-black'><button class='w-12 h-12 bg-gray-300 shadow-lg rounded-full'><p class='nudgeup'>+</p></button></li>
                </ul>
              </li>
            </ul>
          </div>
        </li>
      </ul>
    </div>

  </div>
</main>

<script src="https://cdn.tailwindcss.com"></script>