你如何将div元素集中在外部css文件中

Question

如何使用外部css文件对div元素进行集中处理.我尝试使用其他人发布的引导类和内联样式,但没有一个工作.我想知道你们如何在没有外部css文件的情况下实现这一点.

Answer 1

如果您不必支持旧浏览器,则可以查看Flexbox.

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

尝试这样的事情:

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

Answer 2

偏移:第一个使用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>

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

使用react-bootrsrap执行此操作的简单方法是

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

使用className(而不是class)来利用Bootstrap的内置"text-center"类.

Answer 5

在导入和 React 类之间有这个

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

然后使用

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