顺风居中文本（垂直/水平）

Posted 2023-03-07

【中文标题】顺风居中文本（垂直/水平）

【英文标题】：Center text (vertically/horizontally) with tailwind

【发布时间】：2020-04-06 02:09:16

【问题描述】：

我创建了一张小卡片，它的左侧应该有一个数字。我解决了这个问题 - 但有一件小事我直到现在都无法解决。

这个数字应该水平和垂直居中。

这就是我所做的：https://codepen.io/spqrinc/pen/jOEraJx

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/1.1.2/tailwind.min.css">
<div class="md:flex lg:w-1/2 p-2">
  <div class="md:flex-1 rounded-sm shadow-lg text-gray-600 bg-white rounded-sm shadow-lg">
    <div class="overflow-hidden w-full flex leading-normal lg:h-full">
      <div class="sm:w-1/3 lg:w-1/4 bg-teal-600 block">
        <div class="text-center text-6xl font-bold text-white">1</div>
      </div>
      <p class="text-gray-600  sm:w-2/3 lg:w-3/4 p-4">
        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
        sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et
        ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
      </p>
    </div>
  </div>
</div>

很遗憾，content-center 不适合我。

【参考方案1】：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/1.1.2/tailwind.min.css">
<div class="md:flex lg:w-1/2 p-2">
  <div class="md:flex-1 rounded-sm shadow-lg text-gray-600 bg-white rounded-sm shadow-lg">
    <div class="overflow-hidden w-full flex leading-normal lg:h-full">
      <div class="sm:w-1/3 lg:w-1/4 bg-teal-600 flex items-center justify-center">
        <div class="text-center text-6xl font-bold text-white">1</div>
      </div>
      <p class="text-gray-600  sm:w-2/3 lg:w-3/4 p-4">
        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
        sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et
        ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
      </p>
    </div>
  </div>
</div>

重要的部分是flex items-center justify-center，而不是第四个div中的block。