Javascript 如何在没有外部 css 文件的情况下将 div 元素居中
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/32282292/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do you center a div element in react w/out external css file
提问by user3088470
How do I center a div element in react with using an external css file. I tried using bootstrap classes and inline styles that other people posted but none of those worked. I was wondering how you guys would implement this without an external css file.
如何使用外部 css 文件将 div 元素居中以做出反应。我尝试使用其他人发布的引导类和内联样式，但没有一个有效。我想知道你们如何在没有外部 css 文件的情况下实现这个。
采纳答案by Atul Nagpal
Offsets: The first uses Bootstrap's own offset classes so it requires no change in markup and no extra CSS. The key is to set an offset equal to half of the remaining size of the row. So for example, a column of size 6 would be centered by adding an offset of 3, that's (12-6)/2.
偏移量：第一个使用 Bootstrap 自己的偏移量类，因此它不需要更改标记，也不需要额外的 CSS。关键是设置一个偏移量等于行剩余大小的一半。因此，例如，大小为 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>
margin-auto: You can center any column size by using the margin: 0 auto; technique, you just need to take care of the floating that is added by Bootstrap's grid system. I recommend defining a custom CSS class like the following:
margin-auto：您可以使用 margin: 0 auto 将任何列大小居中；技术，您只需要处理 Bootstrap 的网格系统添加的浮动。我建议定义一个自定义 CSS 类，如下所示：
.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 :
现在您可以将它添加到任何屏幕尺寸的任何列尺寸，并且它将与 Bootstrap 的响应式布局无缝协作：
<div class="row">
<div class="col-lg-1 col-centered"></div>
</div>
回答by Jeff Fairley
If you don't have to support old browsers, you may look into Flexbox.
如果你不需要支持旧浏览器，你可以看看 Flexbox。
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Try something like this:
尝试这样的事情：
<div style={{display: 'flex', justifyContent: 'center'}}>
<div>centered content</div>
</div>
回答by Amio.io
I am using react-bootstrapfor this:
我正在使用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>
)
}
}
and then in code
然后在代码中
<CenterView>
<LoginForm/>
</CenterView>
回答by Amy Plant
An easy way to do this using react-bootrsrap is
使用 react-bootrsrap 执行此操作的一种简单方法是
<Grid>
<Row className="text-center"><h1>Our Products</h1></Row>
</Grid>
Use className (instead of class) to take advantage of Bootstrap's built in class of "text-center".
使用 className（而不是 class）来利用 Bootstrap 内置的“text-center”类。
回答by projectds
Have this between the imports and React Class
在导入和 React 类之间有这个
const styles = {
center: {
marginLeft: "auto",
marginRight: "auto"
}
}
Then to use
然后使用
<div className={styles.center}>
hi
</div>
回答by Blasanka
I just added:
我刚刚补充说：
<Grid container spacing={2} justify="center"></Grid>
