Vertically center text on the button

Question

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

Adam · Accepted Answer · 2022-08-28T21:41:15.750

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>

yes, correct. I think that the problem happening because of `line-height`, because in tailwind `line-height` is always bigger than `font-size`, like you see here https://tailwindcss.com/docs/font-size (for correct solution we need `line-height` **equal to 1** or equal to the font-size) ---- with 3xl font class, we have `font-size:30px` and `line-height:36px` (and this is the prove why `0.5rem` work fine, because `1rem=16px` — Laaouatni Anas, Aug 28 '22 at 22:01
...(I can add more info in the first comment so here the continued comment) ➡️with 3xl font class, we have `font-size:30px` and `line-height:36px`. and this is the prove why `bottom:0.25rem` work fine, because `1rem=16px`, and `0.25rem=4px`. and 36-30 is 6px (with 2px of error in 0.25rem, pretty close to perfection, not noticeable bug, so good job @adamUK73) — Laaouatni Anas, Aug 28 '22 at 22:08

score 0 · Answer 2 · answered Aug 28 '22 at 21:46

0

try this:

  .nudgeup { position:relative; bottom:0.25rem; }

answered Aug 28 '22 at 21:46

Mazdak

15
2
9

I literally posted that about 15 minutes ago?! – Adam Aug 28 '22 at 21:49

Vertically center text on the button

2 Answers2