Bir div öğesinin tepkisel w/out harici css dosyasında nasıl merkezlenirsiniz

Question

Bir div öğesinin harici bir css dosyası kullanarak nasıl tepki vereceğini nasıl ortalarım. Önyükleme sınıflarını ve diğer insanların yayınladığı satır içi stillerini kullanmayı denedim, ancak bunların hiçbiri işe yaramadı. Bunu harici bir css dosyası olmadan nasıl uygulayacağınızı merak ediyordum.

Answer 1

Offsetlerini: Bu biçimlendirme hiçbir değişiklik ve hiçbir ekstra CSS gerektirir böylece ilk Bootstrap kendi ofset sınıflarını kullanır. Anahtar, satırın kalan boyutunun yarısına eşit bir uzaklık ayarlamaktır. Örneğin, 6 boyutunda bir sütun 3 (2) ofset ekleyerek ortalanır, bu (12-6)/2'dir.

In markup this would look like: 

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

margin-auto: Kenar boşluğunu kullanarak herhangi bir sütun boyutunu ortalayabilirsiniz: 0 auto; Teknik olarak, sadece Bootstrap'ın grid sistemi tarafından eklenen yüzer dikkat çekmek gerekir. Aşağıdaki gibi özel bir CSS sınıfı tanımlayan öneririz:

.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

Eski tarayıcıları desteklemeniz gerekmiyorsa, Flexbox'a bakabilirsiniz.

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

böyle bir şey deneyin:

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

Answer 3

Bunun için react-bootstrap kullanıyorum:

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

ve sonra kodu

<CenterView> 
    <LoginForm/> 
</CenterView> 

Answer 4

kullanarak bunu yapmanın kolay bir yolu içinde reaksiyon-önyükleme birimi

Bootstrap'in yerleşik "metin-merkezi" sınıfından yararlanmak için className (sınıf yerine) kullanın.