React 这样一个响亮的名字,注定会引起一些 流交叉混淆,正如我喜欢称呼的那样。 你如何在 React 中居中一个 <div>
? Dave Ceddia
React 对样式完全不关心。 可以把它想象成生成最基本的 HTML。 React 会将元素放在页面上,但之后的所有内容都是 CSS 的工作:它们的外观、样式、位置以及它们是居中还是不居中。
“如何在 React 中居中一个 div”…… 这不是 React 的问题。 这是一个 CSS 问题。 你不需要在 Google 查询中包含“react”。 弄清楚后,使用 React 将正确的 CSS 类名应用于你的组件。
如何在 WordPress 中居中一个 <div>
? 如何在 Vue 中居中一个 <div>
? 一方面,这些都是错误的问题。 这些技术与居中事物无关。 网页上的居中是 CSS 做的事情。 另一方面,更高级的 技术 有时会涉及进来。 也许 WordPress 中有一些 Gutenberg 东西,它处理你应该用于编辑一致性的特定站点上的居中。 也许正在使用一些样式库,这意味着你无法编写常规的 CSS——你必须按照库想要的方式编写它。 这一切都很复杂,所有这些“制作网站”的东西。
我认为,“如何使用 React 居中某物”这样的问题通常源于在 React 组件中添加 CSS 的各种方法和众多方法。 在阅读教程时,它通常看起来像是 CSS 必须在 JS 内添加到组件中,也许甚至是在内联级别。 帮助人们理解,CSS 在使用 React 时仍然像以前一样工作,以及 CSS-in-JS 是在使用 React 时许多高度主观的选择之一,将有助于消除这种混淆。 我个人认为。
有一些方法可以为 React 应用程序设置样式。
选项 1
如果你使用 npm 包“create-react app”创建一个 React 应用程序,那么会有“app.css”、“index.css”作为样式模板,其中渲染的组件默认居中。
选项 2
React 中的 JSX 脚本嵌入在 HTML 页面中。 你可以在 HTML 页面标题中包含“Bootstrap.css”链接。
选项 3
为你的 React 应用程序安装 Material-UI。 它与 Bootstrap 的效果一样好。