代码之家 › 专栏 › 技术社区 › Ben

如何创建最大宽度的居中div

tailwind-css css

Ben · 技术社区 · 1 年前

我想把我所有的内容放在一个居中的div中,但要有一个最大宽度,这样内容在大屏幕上就不会扩展得太宽。像这样的东西

我认为这将工作使用 flex + justify-center + max-w-lg ,但事实并非如此。

<main class="pt-20">
  <div class='flex justify-center max-w-lg'>
    <h2 class="text-5xl font-semibold tracking-tight text-center text-gray-700">
      A Cool Title
    </h2>
    <p class="mt-8 text-sm text-center text-gray-700">
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    </p>
  </div>
</main>

(测试时间 https://play.tailwindcss.com/ )

1 回复 | 直到 1 年前

Damzaky 1 年前

您可以添加 flex-col 使中心垂直 mx-auto 使得其具有水平裕度:

<main class="pt-20">
  <div class='flex justify-center max-w-lg flex-col mx-auto'>
    <h2 class="text-5xl font-semibold tracking-tight text-center text-gray-700">
      A Cool Title
    </h2>
    <p class="mt-8 text-sm text-center text-gray-700">
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    </p>
  </div>
</main>

推荐文章

YunusoviÄ · 我无法用css更改html段落颜色

9 月前

Blake · 无法使用CSS旋转Angular 15中的字体图标

9 月前

Maarten -Monica for president · 将图像放在锚点标记内时调整网格中的图像大小

9 月前

Phil Lucks · 如何制作边界的外半径?

9 月前

roy_meir · 创建自定义下拉式元素

9 月前

Community wiki · 如何为触摸设备优化网站

9 月前

Paras Chandravanshi · 为什么<ul>没有从其父<p>元素继承?

9 月前

tpetzoldt · 如何在有光泽的情况下抑制图像的抗锯齿?

9 月前

boyenec · 反应如何将css样式应用于我从api respose获得的页面的spcifc部分

9 月前

manofconstsorrow · 点击导航项目关闭汉堡菜单

9 月前