问题描述
我有我正在寻找的效果:内容在容器中“居中”并带有偏移量,并且会随着窗口/容器的缩小而优雅地居中。在我的例子中,我的黄色内容位于主容器左侧的 25% 处,并且在屏幕缩小时会居中。
是否有更好或更有效的方法来实现这一目标?我已经尝试了 css 函数 min
和 clamp
,但我无法实现我想要的。
.container {
background: red;
padding: 2rem;
}
.squish {
margin: 0 auto;
max-width: max-content;
}
.width50 {
min-width: 50vw;
}
.content {
width: 10em;
background: yellow;
padding: 1rem;
}
<div class="container">
<div class="squish">
<div class="width50">
<div class="content">
Sequi distinctio veniam corrupti nihil non. Ea sunt dolorum pariatur accusamus. Eveniet non atque rerum et sed soluta. Magnam quia adipisci iste consectetur velit et perspiciatis
</div>
</div>
</div>
</div>
解决方法
您是否尝试过 flexbox 来解决这个问题?您可以通过添加 display: flex; 来使元素居中。给父级,并且 justify-content: center;在下面查看我的代码片段:)
还签出 flexbox:https://css-tricks.com/snippets/css/a-guide-to-flexbox/
.parent {
display: flex;
justify-content: center;
padding: 5rem 0;
background-color: blue;
}
.content {
padding: 1rem;
background: white;
}
<div class="parent">
<div class="content">
<p>Text Goes here</p>
</div>
</div>