如何在没有外部 css 文件的情况下将 div 元素居中
Posted
技术标签:
【中文标题】如何在没有外部 css 文件的情况下将 div 元素居中【英文标题】:How do you center a div element in react w/out external css file 【发布时间】:2015-11-23 18:41:37 【问题描述】:如何在使用外部 css 文件时使 div 元素居中。我尝试使用其他人发布的引导类和内联样式,但这些都不起作用。我想知道你们如何在没有外部 css 文件的情况下实现这一点。
【问题讨论】:
你知道它的宽度吗?如果没有,我认为您可以添加样式position: relative; left:auto; right:auto;
【参考方案1】:
我刚刚添加了:
<Grid container spacing=2 justify="center"></Grid>
【讨论】:
【参考方案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>
【讨论】:
【参考方案3】:在导入和 React 类之间有这个
const styles =
center:
marginLeft: "auto",
marginRight: "auto"
然后使用
<div className=styles.center>
hi
</div>
【讨论】:
【参考方案4】:使用 react-bootrsrap 的一种简单方法是
<Grid>
<Row className="text-center"><h1>Our Products</h1></Row>
</Grid>
使用 className(而不是 class)来利用 Bootstrap 内置的“text-center”类。
【讨论】:
非常感谢!如果您使用的是 react-bootstrap,则为最佳答案。【参考方案5】:我为此使用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>
【讨论】:
【参考方案6】:如果你不需要支持旧的浏览器,你可以看看 Flexbox。
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
试试这样的:
<div style=display: 'flex', justifyContent: 'center'>
<div>centered content</div>
</div>
【讨论】:
以上是关于如何在没有外部 css 文件的情况下将 div 元素居中的主要内容,如果未能解决你的问题,请参考以下文章
如何在没有端口映射的情况下将 docker 容器的 ip 和端口暴露给外部 docker 主机?
如何在没有 Webpacker 的情况下将 Tailwind CSS 添加到 Rails?