模态垂直中心对齐和滚动

Question

我正在使用bootstrap模式，我想在模态主体内有一个带有此结构的列表：

    IMAGE            IMAGE        IMAGE       IMAGE
  All Options       Option1     Option2     Other Option
   IMAGE            IMAGE        IMAGE       IMAGE
   Option3         Option4      Option5       ...
   IMAGE            
   Option7

因此，按钮和所有列表项之间的边距相同，垂直对齐并与滚动对齐，因为按钮可以占用高度，而不是默认的模态高度。

您知道如何实现吗？我这样做：http：//jsfiddle.net/znhgdzl7/，但它不起作用。

Answer 1

我在CSS中添加了最大高度和一个溢出。这会解决您的问题吗？它可能不是您想要的值，但是您可以相应地调整它们。要将内容保留在水平最大值中，您需要将包装属性添加到CSS中。请参阅新的小提琴。

  display: flex;
  flex-wrap:wrap;
  max-height:50px;
  overflow-y:auto;

新小提琴：http：//jsfiddle.net/djwave28/znhgdzl7/7/

Answer 2

检查以下内容：http://jsfiddle.net/znhgdzl7/10/

模态现在可以处理许多选项。

这是CSS：

img{
  width: 30px;
  height: 30px;
  margin-bottom: 20px;
}
.row > div {
  margin-bottom: 20px;
  text-align: center;
}
.categories-list {
 max-height: 400px;
 overflow-y: auto;
}

我还更新了HTML，您只需在JSFIDDLE链接上检查它。