如何解决如何正确集中这些项目?
我在这里有代码,但是基本上问题是我有这些产品卡,并且我试图将它们放在中间,但也可以使它们与其他卡对齐。
https://codepen.io/manfreebie/pen/NWNvyGz
这是我要完成的任务与实际发生的事情的视觉对比。乍一看,直到您尝试调整它的大小。
我试图使鸡尾酒容器的值像flex-start而不是居中这样的justify-content属性居中
#cocktails-container {
max-width: 70%;
display: flex;
flex-flow: row wrap;
justify-content: flex-start;
}
但是,当我调整它的大小时,在右边留下了很多空白。我尝试使用inline-block并使用text-align代替,但是那也不起作用。
解决方法
添加此代码。
Private
,
我只分享我更改过的部分,其余部分相同。
#cocktails-container {
width: 70%; // You can adjust this for your needs
display: flex;
flex-flow: row wrap;
justify-content: start;
}
// Removed margin from .cocktail but added padding to the a tag
.cocktail {
width: 100%;
height: auto;
padding-top: 10px;
text-align: center;
}
a {
width: 33%; // You should adjust this for different screen widths,mobile 100% large 25% etc.
padding: 15px;
box-sizing: border-box; // This is necessary to include padding in '33% width'
}
,
请尝试使用此代码,以确认如何正确居中这些项目?
.box {
display: flex;
align-items: flex-start;
height: 200px;
}
.box .selected {
align-self: center;
}
<div class="box">
<div class="selected">Three</div>
</div>
我希望这段代码对您有用。
谢谢。
,我在检查代码时发现的问题是您正在为margin
类使用margin: 50px 0px;
.cocktail
。将其更改为以下内容。
@media (max-width: 800px) {
.cocktail {
width: 60%;
margin: 50px auto;
}
}
提供边距值50px 0px;
将使左边缘和右边缘的samller分辨率为零。将其更新为50px auto
,它将为左边距和右边距提供自动值。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。