Wie zentriert man ein div-Element in react w/out externe CSS-Datei

Question

Wie zentriere ich ein div-Element in Reaktion mit einer externen CSS-Datei. Ich habe versucht, Bootstrap-Klassen und Inline-Stile zu verwenden, die andere Leute gepostet haben, aber keiner von denen hat funktioniert. Ich habe mich gefragt, wie ihr das ohne eine externe CSS-Datei implementieren würdet.

Answer 1

Versätze: Die erste Offset-Klassen Bootstrap eigenen verwendet, so dass es keine Änderung in der Markup und keine zusätzliche CSS erfordert. Der Schlüssel besteht darin, einen Versatz festzulegen, der gleich der Hälfte der verbleibenden Größe der Zeile ist. So würde zum Beispiel eine Spalte der Größe 6 zentriert werden, indem ein Offset von 3 hinzugefügt wird, also (12-6)/2.

In markup this would look like: 

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

margin-Auto: Sie können mit Hilfe des Randes jede Spaltengröße Zentrum: 0 auto; Technik, müssen Sie nur auf das Floating achten, das vom Bootstrap-Grid-System hinzugefügt wird. Ich empfehle, die eine benutzerdefinierte CSS-Klasse wie folgt aus:

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

Now you can add it to any column size at any screen size and it will work seamlessly with Bootstrap's responsive layout : 

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

Answer 2

Wenn Sie alte Browser nicht unterstützen müssen, können Sie in Flexbox schauen.

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

so etwas wie dieses Versuchen:

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

Answer 3

ich react-bootstrap hierfür bin mit:

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> 
     ) 
    } 
} 

und dann in Code

<CenterView> 
    <LoginForm/> 
</CenterView> 

Answer 4

Eine einfache Möglichkeit, dies zu tun mit react-bootrsrap ist

Verwenden Sie className (anstelle der Klasse), um die Bootstrap-Klasse "text-center" zu nutzen.