No puedo apuntar a className en reaccionar. Intento orientarlo con div className="navbar"> y .navbar { align-items: center; } pero no funciona.
div{ display: block; background-color: rgb(211, 57, 57); font: sans-serif; color: #white; } li { list-style: none; display: block; align-items: center; } ul { display: block; box-sizing: border-box; } .navbar { align-items: center; }y navbar.js `
`
import React from 'react' import './Navbar.css' const Navbar = () => { return ( <div className="navbar"> <ul className="ul"> <li><a href="/home">Home</a></li> <li><a href="/about">About</a></li> <li><a href="/contact">Contact</a></li> </ul> </div> ) } export default NavbarLa regla align-items: center; está conectado al uso de Flexbox, por sí solo no hará mucho. Editar para que coincida:
.navbar { display: flex; align-items: center; } Recuerde también que la forma predeterminada de flex es organizar los elementos secundarios horizontalmente, y align-items mueve los elementos secundarios verticalmente en ese caso. Si desea que los elementos secundarios se apilen verticalmente, debe agregar flex-direction: column;
Tu index.html debería verse así:
<!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" type="text/css" href="/App.css"> </head> <body> <div id="root"></div> </body> </html>React no tiene nada que ver con tu css. Puede usar reaccionar para modificar su css y puede usar paquetes npm como material-ui para hacer el estilo por usted. Pero como claramente no está haciendo ninguna de esas cosas, la solución anterior es la correcta.