gpt4 book ai didi

html - Jquery Isotope - 无法将容器内的多个 div 居中 - Isotope 导致问题

转载 作者:太空宇宙 更新时间:2023-11-03 17:47:22 25 4
gpt4 key购买 nike

我结合使用 Bootstrap 和 PHP 来创建投资组合部分。
我有大约 12 个元素,我想在每一行显示其中的 4 个。

问题是无论我做什么,单位都粘在容器的左侧,我似乎无法将它们居中,即使在 SO 上进行了所有搜索也是如此。

这是我正在使用的代码。

HTML

<section class="wow fadeInUp animated" data-wow-offset="200" id="portfolio">
<div class="container">
<h2>Portfolio</h2>

<div class="filter">
</div>

<div class="thumb-container" >
<div class='thumb-unit'></div>
<div class='thumb-unit'></div>
<div class='thumb-unit'></div>
<div class='thumb-unit'></div>
<div class='thumb-unit'></div>
<div class='thumb-unit'></div>
<div class='thumb-unit'></div>
<div class='thumb-unit'></div>
<div class='thumb-unit'></div>
<div class='thumb-unit'></div>
<div class='thumb-unit'></div>
<div class='thumb-unit'></div>
</div>
</div>
</section>

CSS

.container{
width: 70%;
}

#portfolio{
height: 100%;
background-color: white;
padding-bottom: 50px;
}

#portfolio .filter{
height: 50px;
text-align: center;
background: transparent;
border-top: 1px solid #7f8c8d;
border-bottom: 1px solid #7f8c8d;
width: 100%;
margin-top: 30px;
}

.thumb-container{
width: 100%;
margin: 15px auto;
text-align: center;
background: red;
}


.thumb-unit{
width: 300px;
height: 225px;
display: inline-block;
margin: 5px;
position: relative;
overflow: hidden;
cursor: pointer;
background: blue;
}

在这个世界上,我如何才能将这些拇指单元置于拇指容器的中心?非常感谢任何帮助。

编辑

奇怪的是 JSFiddle它有效,但我不明白为什么它不在我身上。尝试刷新缓存,换个浏览器,结果还是一样。

编辑 2

我发现问题是isotope ,我用于过滤的库。

有人遇到过这个问题吗?

最佳答案

它看起来居中对齐,但是...如果您使用的是 Bootstrap,为什么不尝试使用这个 Bootstrap 组件?

http://getbootstrap.com/components/#thumbnails-custom-content

您的 CSS 代码会更短。

关于html - Jquery Isotope - 无法将容器内的多个 div 居中 - Isotope 导致问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27921594/

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