如何在 React 中处理 "centering" 你的网站

Question

我认为这是一个相对简单的问题，我如何通过 React“居中”我的网站，让我解释一下。这是我刚刚在 figma 中制作的东西的图片，现在我正试图在 React 中实现 https://gyazo.com/e940da061c627cbb5d30571efebf2c7b 我想知道如何在不为所有元素添加边距的情况下获得左右边距（同时仍然允许内容像导航栏的两侧一样溢出）。某种“布局”组件，但我正在努力让它发挥作用，让您的网站像这样对齐是很常见的事情，我相信这里有人知道。感谢所有帮助，谢谢。（我正在使用 tailwind css 并且最好不想使用不同的框架或其他东西）

Answer 1

您可以在主 div 中制作一个包装器。所以主要 div 将覆盖您网站的 100% 宽度。然后里面的wrapper有这样的属性

main {
  height: 100vh;
  width: 100%;
}

.wrapper_main {
  max-width: 1000px;
  margin: 0 auto;
  width 100%;
  background-color: pink;
}

max-width 将限制您的网站扩展。保证金自动使其始终位于中心。较小设备的宽度为 100%，因此两者之间没有边距。背景颜色最适合调试 css 代码。

如何在 React 中处理 "centering" 你的网站

How to handle "centering" your website in react

javascript

css

alignment

reactjs