对齐问题（js小提琴）

Question

所以我想将多个div彼此对齐（水平居中）。 如果有多个div，则div所在的容器应像简单的滚动条一样在x方向上滚动以得到如下所示的内容：

注意 ：有人会在图像之前添加(!)吗？

---

但是-使用此代码，到目前为止我无法正常工作：

 #container { position: relative; width: 80%; height: 40%; overflow-x: scroll; background: gray; } .item { position: absolute; width: 10%; height: 80%; background-image: url("http://www.icemeltmanufacturers.com/wp-content/uploads/2016/09/head-icon-png-5.png"); background-repeat: no-repeat; background-position: 50% 50%; margin: auto; top: 0; bottom: 0; background-size: contain; } #bigContainer { position: absolute; width: 100%; height: 50%; background: white; bottom: 0%; border-radius: 15px 15px 0px 0px } 

 <div id="bigContainer"> <div id="container"> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> </div> </div> 

注意 ：看来Stackoverflow当前对我来说是坏了，所以有一些测试代码的小提琴： https : //jsfiddle.net/nfdgyx73/13/

注意 ：提供一种解决方案很不错，因为我不必对容器进行大量更改（尤其是不更改其位置属性）

任何帮助将不胜感激，在此先感谢一百万！

Answer 1

您是否正在寻找这样的东西？ 我还更新了小提琴： https : //jsfiddle.net/nfdgyx73/40/

只需显示内联项（ display: inline-block ），并确保您没有包装容器，因为它使用％来计算宽度（ white-space: nowrap ），并确保容器上没有溢出y轴（ overflow-y: hidden ）

根据您的评论，我还在容器ID中添加了text-align: center ，因此，如果不需要滚动的项目较少，它们将居中。

 #container { position: relative; width: 80%; height: 40%; overflow-x: scroll; background: gray; overflow-y: hidden; white-space: nowrap; text-align: center; } .item { display: inline-block; width: 10%; height: 80%; background-image: url("http://www.icemeltmanufacturers.com/wp-content/uploads/2016/09/head-icon-png-5.png"); background-repeat: no-repeat; background-position: 50% 50%; margin: 4px; top: 0; bottom: 0; background-size: contain; } #bigContainer { position: absolute; width: 100%; height: 50%; background: white; bottom: 0%; border-radius: 15px 15px 0px 0px } 

 <div id="bigContainer"> <div id="container"> <div class="item"></div> <div class="item"></div> <div class="item"></div> </div> </div> 

Answer 2

我的解决方案使用弹性框根据需要对齐所有项目。 如果项目多于可用空间，则添加滚动条（取消注释额外的div即可看到效果）

https://jsfiddle.net/nfdgyx73/58/

 #container { position: relative; width: 80%; height: 40%; overflow-x: scroll; background: gray; display: inline-flex; flex-direction: row; align-items: center; } #container::before, #container::after { content: ''; margin: auto; } .item { width: 10%; height: 80%; background: url("http://www.icemeltmanufacturers.com/wp-content/uploads/2016/09/head-icon-png-5.png"); background-repeat: no-repeat; background-position: 50% 50%; background-size: contain; margin: 0 5px; flex-shrink: 0; } #bigContainer { position: absolute; width: 100%; height: 50%; background: white; bottom: 0%; border-radius: 15px 15px 0px 0px } 

 <div id="bigContainer"> <div id="container"> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <!-- <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> --> </div> </div> 

Answer 3

如果position: absolute; 不必要，这可以通过flexbox完成

 #container { display: flex; justify-content: center; width: -webkit-fit-available; padding: 20px; background: gray; } #container .item { margin-right: 10px; } #container .item:last-child { margin-right: 0; } .item { width: 25px; height: 25px; background-image: url("http://www.icemeltmanufacturers.com/wp-content/uploads/2016/09/head-icon-png-5.png"); background-repeat: no-repeat; background-position: 50% 50%; background-size: contain; } #bigContainer { display: flex; width: 80%; background: white; overflow-x: auto; border-radius: 15px 15px 0px 0px; margin-bottom: 20px; /* This is just to help differentiate the two bigContainers */ } 

 <div id="bigContainer"> <div id="container"> <div class="item"></div> <div class="item"></div> <div class="item"></div> </div> </div> <div id="bigContainer"> <div id="container"> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> </div> </div>