0
680
Vistas¿Cómo centrar horizontalmente el contenido de un div con css en React?
Tengo un HomeComponent como el siguiente:
import "./Home.css"; import { Component } from "react"; import { Link } from "react-router-dom"; import axios from 'axios'; export default class Home extends Component { constructor(props) { super(props); this.state = { games: [], }; } componentDidMount() { // the games are retrieved asynchronously with a call to an API and the state is changed } render() { return <div className="center"> <Link className="btn btn-lg game-btn" to="/games/create"><i className="fa fa-play fa-fw"></i> Play a game!</Link> <div style={{marginTop: 20}}> {this.state.games.map((game) => { return <div className="row"> <div className="col col-2">Play as { game.blackPlayerId? "white" : "black" }</div> <div className="col col-2">{ game.timeLimit } minutes</div> <div className="col col-2">{ game.isRated ? "Rated" : "Unrated" }</div> <div className="col col-4"><Link className="btn btn-lg" to={ "/games/create/"+game.gameId }><i className="fa fa-play fa-fw"></i> Play a game!</Link></div> </div> })} </div> </div>; } }En el archivo Home.css tengo:
.center { text-align: center; justify-content: center; align-items: center; } .game-btn { background-color: #1e272e; color: white; width: 300px; height: 50px; font-size: larger !important; box-shadow: 0 4px 8px 0 rgb(0 0 0 / 30%), 0 6px 20px 0 rgb(0 0 0 / 25%); margin-top: 20px; }Como puede ver en la siguiente imagen, el estilo Home.css se aplica correctamente pero el contenido no está correctamente centrado (el botón Reproducir está alineado al centro pero la fila no)
2 Respuestas
Responde la pregunta0
Consulte esta respuesta de una pregunta similar para obtener más sugerencias. Recomendaría el enfoque n. ° 2, usando flexbox . Si desea que todo, incluido el botón, esté centrado en una sola fila, aplique lo siguiente en .center :
.center { display: flex; align-items: center; justify-content: center; } Para aplicar el estilo solo a los elementos en .row :
.row { display: flex; align-items: center; justify-content: center; } Flex se aplicará a los elementos secundarios de cualquier elemento al que lo agregue. Si desea que todos los .row estén centrados, aplique flex al div principal que rodea la función de map .
0
Solo necesita agregar display: flex a su class .center y mejor si elimina text-align: center . Si desea usar flex-box, necesita agregar display: flex al componente parental. Lea más aquí https://css-tricks.com/snippets/css/a-guide-to-flexbox/