gpt4 book ai didi

css - 当没有足够的数据来填充整行时,网格布局中的中心元素

转载 作者:行者123 更新时间:2023-12-05 03:07:05 24 4
gpt4 key购买 nike

我正在使用新的 CSS 网格布局,基本上我正在显示一系列图像,六列就可以了,我已经把那部分记下来了,但是内容有一个可变的数字,而且经常出现没有足够的内容来填满每一列,所以如果行中只有两个元素,我希望它们位于中间两列的中心。这是一个相对较新的 API,尽管我还没有看到我设法正常工作的类似内容。这是一些 CSS 示例,如果有什么地方看起来非常错误,请原谅我的无知。

#result-images{
display: grid;
grid-template-columns: 260px 260px 260px 260px 260px 260px;
grid-gap: 11px;
grid-column-gap:55px;
background-color: #959595;
border-style:solid;
border-width:3px;
border-color:#FFFFFF;

}

#result-images img{
width:100%;
height: 100%;
background-color: #363636;
display:block;
margin: 0 auto;
}

最佳答案

使用 Flexbox 实际上更容易实现这种输出。示例如下。

#result-images{
display:flex;
flex-flow: row wrap;
justify-content:center;
align-content:center;
align-items:center;
border: 2px solid black;
max-width:360px;
}

#result-images img{
min-width: 120px;
max-width: 120px;
min-height: 120px;
max-height: 120px;
flex: 0 1 auto
align-self:center;
}
<section id="result-images">

<img src="https://rack.pub/media/ronRoyston.png">
<img src="https://rack.pub/media/ronRoyston.png">
<img src="https://rack.pub/media/ronRoyston.png">
<img src="https://rack.pub/media/ronRoyston.png">
<img src="https://rack.pub/media/ronRoyston.png">


</section>

  1. 列表项

关于css - 当没有足够的数据来填充整行时,网格布局中的中心元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48435563/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com