在按钮上垂直居中文本

Question

我正试图把这篇文章垂直地放在按钮上，这让我发疯了。我花了一天时间在这个问题上，却找不到解决办法。我正在使用NEXT.js和TailwindCSS。

​

​

<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>

​

谢谢

Answer 1

是的，超级烦人。您可以通过添加一个类来将元素向上推0.25rem (我已经添加了一个名为.nudgeup的类，并将符号包装在p标记中)，就可以强制执行它。

​

<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>

​

Answer 2

试试这个：

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