web-dev-qa-db-ja.com

外部CSSファイルなしで反応するdiv要素をどのように中央に配置しますか

外部のcssファイルを使用して反応するdiv要素を中央に配置するにはどうすればよいですか？ bootstrap他の人が投稿したクラスとインラインスタイルを使用しようとしましたが、どれも機能しませんでした。

javascripthtml5css3twitter-bootstrap-3reactjs
24
user3088470

オフセット：最初はBootstrap独自のオフセットクラスを使用するため、マークアップの変更や追加のCSSは不要です。キーは、行の残りのサイズの半分に等しいオフセットを設定することです。したがって、たとえば、サイズ6の列は、オフセット3を追加することで中央揃えになります。つまり、（12-6）/ 2です。

マークアップでは、これは次のようになります。

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

margin-auto：margin：0 auto;を使用して、任意の列サイズを中央に配置できます。テクニックでは、Bootstrapのグリッドシステムによって追加されるフローティングの世話をする必要があります。次のようなカスタムCSSクラスを定義することをお勧めします。

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

これで、任意の画面サイズで任意の列サイズに追加でき、Bootstrapのレスポンシブレイアウトでシームレスに動作します。

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

古いブラウザをサポートする必要がない場合は、Flexboxを調べてください。

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

次のようなものを試してください：

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

私は使っている 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>
12
Amio.io

React-bootrsrapを使用してこれを行う簡単な方法は

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

（クラスの代わりに）classNameを使用して、「テキストセンター」のブートストラップの組み込みクラスを利用します。

8
Amy Plant

インポートとReact Class

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

次に使用する

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