Tailwind CSS - mx-auto 不居中 div 元素？答案

【问题标题】：Tailwind CSS - mx-auto not centering div element?Tailwind CSS - mx-auto 不居中 div 元素？
【发布时间】：2021-03-25 07:33:16
【问题描述】：

我正在使用 Tailwind CSS 在 React 中构建一个项目，我试图将 <div> 元素与 <div className="container mx-auto"> 居中，但它不会使元素居中。代码有什么问题。

import React from "react";
import { NavLink } from "react-router-dom";

function NavBar() {
  return (
    <header className="bg-red-600">
      <div className="container mx-auto flex justify-between">
        <nav className="flex">
          <NavLink
            to="/"
            exact
            activeClassName="text-white"
            className="inline-flex items-center py-6 px-3 mr-4 text-red-100 hover:text-green-800 text-4xl font-bold cursive tracking-widest"
          >
            Tailwind CSS
          </NavLink>
          <NavLink
            to="/post"
            className="inline-flex items-center py-3 px-3 my-6 rounded text-red-200 hover:text-green-800"
            activeClassName="text-red-100 bg-red-700"
          >
            Blog
          </NavLink>
          <NavLink
            to="/project"
            className="inline-flex items-center py-3 px-3 my-6 rounded text-red-200 hover:text-green-800"
            activeClassName="text-red-100 bg-red-700"
          >
            Projects
          </NavLink>
          <NavLink
            to="/about"
            className="inline-flex items-center py-3 px-3 my-6 rounded text-red-200 hover:text-green-800"
            activeClassName="text-red-100 bg-red-700"
          >
            About
          </NavLink>
        </nav>
        <div>
            
        </div>
      </div>
    </header>
  );
}

export default NavBar;

当我缩小屏幕尺寸时，<div> 元素居中。

【问题讨论】：

它是中心，不是吗？ i.stack.imgur.com/0gGjN.png
@charles 这不是我的中心。我不知道为什么。
可以分享截图吗？我猜你需要调整你的窗口更大？
@charles i.stack.imgur.com/eUHb9.png
@charles 当我减小屏幕尺寸时，元素居中但不在全屏上。这是截图i.stack.imgur.com/hNLJV.png

标签： reactjs tailwind-css

【解决方案1】：

您的mx-auto 班级实际上做得很好。问题是container 类有一个width 和100%，并且在每个断点处都有一组max-width，所以看起来它没有居中，但实际上它非常宽。

它明显在768px 工作，因为容器宽度是640px，在两边显示64px，但说1024px 宽container 有max-width 的1024px，所以不会有任何空间两边。

我会在 Tailwind 配置文件中删除不需要容器增长的断点。

【讨论】：