web-dev-qa-db-fra.com

Comment centrez-vous un élément div pour réagir sans fichier css externe

Comment puis-je centrer un élément div pour réagir à l'aide d'un fichier css externe. J'ai essayé d'utiliser bootstrap) les classes et les styles intégrés que d'autres personnes ont postés, mais aucun de ceux-ci n'a fonctionné. Je me demandais comment vous pourriez implémenter cela sans un fichier css externe.

javascripthtml5css3twitter-bootstrap-3reactjs
24
user3088470

Offsets: le premier utilise les propres classes d'offset de Bootstrap, de sorte qu'il ne nécessite aucune modification du balisage ni aucun CSS supplémentaire. La clé consiste à définir un décalage égal à la moitié de la taille restante de la ligne. Ainsi, par exemple, une colonne de taille 6 serait centrée en ajoutant un décalage de 3, soit (12-6)/2.

Dans le balisage, cela ressemblerait à ceci:

<div class="row">
    <div class="col-md-6 col-md-offset-3"></div>
</div>

margin-auto: vous pouvez centrer n’importe quelle taille de colonne en utilisant la marge: 0 auto; technique, il vous suffit de prendre soin du flottant ajouté par le système de grille de Bootstrap. Je recommande de définir une classe CSS personnalisée comme suit:

.col-centered{
    float: none;
    margin: 0 auto;
}

Maintenant, vous pouvez l'ajouter à n'importe quelle taille de colonne à n'importe quelle taille d'écran et cela fonctionnera de manière transparente avec la disposition réactive de Bootstrap:

<div class="row">
    <div class="col-lg-1 col-centered"></div>
</div>
19
Atul Nagpal

Si vous n'avez pas à prendre en charge les anciens navigateurs, vous pouvez consulter Flexbox.

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Essayez quelque chose comme ça:

<div style={{display: 'flex', justifyContent: 'center'}}>
  <div>centered content</div>
</div>
25
Jeff Fairley

J'utilise react-bootstrap pour ça:

export default class CenterView extends React.Component {
    render() {
        return (
            <Grid>
                <Row className="show-grid">
                    <Col xs={1} md={4}></Col>
                    <Col xs={4} md={4}>{this.props.children}</Col>
                    <Col xs={1} md={4}></Col>
                </Row>
            </Grid>
        )
    }
}

puis en code

<CenterView>
    <LoginForm/>
</CenterView>
12
Amio.io

Un moyen facile de faire cela en utilisant react-bootrsrap est

<Grid>
   <Row className="text-center"><h1>Our Products</h1></Row>
</Grid>

Utilisez className (au lieu de classe) pour tirer parti de la classe de "text-center" intégrée à Bootstrap.

8
Amy Plant

Avoir cela entre les importations et React Classe

const styles = {
  center: {
    marginLeft: "auto",
    marginRight: "auto"
  }
}

Puis utiliser

<div className={styles.center}>
  hi
</div>
2
GreenCarver