使用具有固定宽度和边距的容器div的旧居中方法:0自动;
我如何才能“转换”为更“现代”的方式?因为当我使用它时,它不仅使容器本身位于容器内部的所有元素的中心,而且不应用flex-direction属性。
EX:
<head>
<style>
.container {
max-width: 1000px;
margin: 0 auto;
}
section {
display: flex;
flex-direction: row;
}
</style>
</head>
<body>
<section>
<div class="container">
</div>
</section
</body>
答案 0 :(得分:1)
只需更新section
和.container
的样式,如下所示:
section {
display: flex;
justify-content: center;
}
.container {
max-width: 1000px;
}
justify-content
有一些非常有用的设置。就您而言,center
可以解决问题。您有flex-direction: row;
很好,但这是伸缩方向的默认值,因此您可以省略该规则。
在{{1}上有一个max-width
,因此它的宽度不如flex .container
会产生居中效果,只需删除section
规则即可。