时间戳

首页 > 解决方案 > 顺风居中文本（垂直/水平）

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

问题描述

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

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

这就是我所做的：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>

不幸的是，内容中心不适合我。

标签： csstailwind-css

解决方案

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

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

推荐阅读