如何在没有外部 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?

如何在没有窗口的情况下将图像直接传送到屏幕上?

如何在不使用画布的情况下将整个 div 数据转换为图像并将其保存到目录中?

如何将外部网页加载到 html 页面的 div 中

对齐类似于静态的动画列表