Bei einem so bekannten Namen wie React ist es unvermeidlich, dass es zu "Stream-Crossing Confusion" (Durcheinander über verschiedene Strömungen hinweg), wie ich es nenne, kommt. Wie zentriert man ein <div> in React? Dave Ceddia
React kümmert sich null um Styling. Betrachten Sie es als Generierung des nackten HTML. React wird Elemente auf der Seite platzieren, aber alles danach ist Aufgabe von CSS: wie sie erscheinen, wie sie aussehen, wie sie positioniert sind und wie zentriert oder nicht zentriert sie sind.
„Wie zentriert man ein Div in React“ ist... kein React-Problem. Es ist ein CSS-Problem. Sie brauchen kein „react“ in Ihrer Google-Suche. Sobald Sie es herausgefunden haben, verwenden Sie React, um den richtigen CSS-Klassennamen auf Ihre Komponenten anzuwenden.
Wie zentriert man ein <div> in WordPress? Wie zentriert man ein <div> in Vue? Einerseits sind das kaputte Fragen. Diese Technologien haben nichts mit dem Zentrieren von Dingen zu tun. Das Zentrieren im Web ist etwas, das CSS tut. Andererseits sind manchmal übergeordnete *Technologien* beteiligt. Vielleicht gibt es im WordPress etwas Gutenberg, das auf dieser speziellen Website das Zentrieren handhabt, das Sie für redaktionelle Konsistenz verwenden sollten. Vielleicht wird eine Styling-Bibliothek verwendet, was bedeutet, dass Sie kein normales CSS schreiben können – Sie müssen so schreiben, wie es die Bibliothek verlangt. Kompliziert, all diese „Websites erstellen“-Sachen.
Ich denke, Fragen wie „wie zentriert man etwas mit React“ kommen oft von der ganzen Vermischung und der Vielzahl von Ansätzen, CSS in React-Komponenten einzufügen. Beim Lesen von Tutorials scheint es oft, als müsste CSS innerhalb der Komponente in JS hinzugefügt werden, vielleicht sogar auf Inline-Ebene. Menschen zu helfen zu verstehen, dass CSS bei der Verwendung von React immer noch so funktioniert wie immer, und dass CSS-in-JS eine sehr meinungsstarke Option von vielen ist, wenn man mit React arbeitet, wird viel dazu beitragen, diese Verwirrung zu entwirren. Meiner Meinung nach.
Es gibt Optionen, um React-Apps zu stylen.
Option 1
Wenn Sie eine React-Anwendung mit dem npm-Paket „create-react app“ erstellen, dann gibt es „app.css“ und „index.css“ als Stilvorlagen, in denen die gerenderte Komponente standardmäßig zentriert ist.
Option 2
React ist im JSX-Skript in eine HTML-Seite eingebettet. Sie können den Link „Bootstrap.css“ in den HTML-Seiten-Header einfügen.
Option 3
Installieren Sie Material-UI für Ihre React-App. Es funktioniert genauso gut wie Bootstrap.