कैसे आप में एक div तत्व केंद्र है w/बाहर बाहरी सीएसएस फ़ाइल

Question

मैं में एक div तत्व कैसे केंद्र है एक बाहरी सीएसएस फ़ाइल का उपयोग कर के साथ प्रतिक्रिया प्रतिक्रिया होती है। मैंने बूटस्ट्रैप कक्षाओं और इनलाइन शैलियों का उपयोग करने की कोशिश की जो अन्य लोगों ने पोस्ट की लेकिन उनमें से कोई भी काम नहीं किया। मैं सोच रहा था कि आप बाहरी सीएसएस फ़ाइल के बिना इसे कैसे लागू करेंगे।

Answer 1

ऑफसेट: पहला बूटस्ट्रैप के स्वयं ऑफसेट कक्षाओं का उपयोग करता है तो यह मार्कअप में कोई परिवर्तन नहीं और बिना किसी अतिरिक्त सीएसएस की आवश्यकता है। कुंजी पंक्ति के शेष आकार के आधे के बराबर ऑफसेट सेट करना है। तो उदाहरण के लिए, आकार 6 का एक कॉलम 3 का ऑफ़सेट जोड़कर केंद्रित होगा, वह (12-6)/2 है।

In markup this would look like: 

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

मार्जिन-ऑटो: आप मार्जिन का उपयोग कर किसी कॉलम आकार को केंद्रित कर सकते हैं: 0 auto; तकनीक, आपको बस फ्लोटिंग की देखभाल करने की आवश्यकता है जो बूटस्ट्रैप के ग्रिड सिस्टम द्वारा जोड़ा जाता है। मैं निम्नलिखित की तरह एक कस्टम सीएसएस वर्ग को परिभाषित करने की सलाह देते हैं:

.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

आप पुराने ब्राउज़रों का समर्थन की जरूरत नहीं है, तो आप flexbox पर गौर कर सकते हैं।

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

कुछ इस तरह का प्रयास करें:

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

Answer 3

मैं इसके लिए react-bootstrap उपयोग कर रहा हूँ:

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

और उसके बाद कोड

<CenterView> 
    <LoginForm/> 
</CenterView> 

Answer 4

का उपयोग कर यह करने के लिए एक आसान तरीका है में प्रतिक्रिया-बूटर्स्रप

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

"टेक्स्ट-सेंटर" के बूट में बूटस्ट्रैप के निर्मित वर्ग का लाभ उठाने के लिए कक्षा नाम (कक्षा के बजाए) का उपयोग करें।