html - 与底部对齐的中心 div 组

Question

我试图将一组 div 在另一个 div 内水平居中。我还希望这些 div 与底部对齐。看来我只能得到一个或另一个。

这是我使用以下代码得到的结果: https://jsfiddle.net/ezka8Lpw/2/embedded/result/

.sandBox{   
    position:relative;
    background-color: #00FF00;
    width: 1440px;
    max-width:100%;
    min-height:560px;
    margin:auto;
    text-align:center;
}
.options{
    position:absolute;
    bottom:0;
}
.option-group{
    width:240px;
    height:75px;
    display: inline-block;
    margin-left:10px;
    margin-right:10px;
    background-color: #EC3538;
}
.active-option-group{
    text-align:left;
    height: 240px;
}
.active-option-group div{
    padding: 10px;
}

如何让所有三个 div 居中？如果我从选项类中删除位置和底部，中心会起作用，但它们不会与底部对齐。

Answer 1

您可以使用 flexbox 轻松完成此操作。仅在 .options 容器 div 中更改您的 CSS:

https://jsfiddle.net/ezka8Lpw/5/embedded/result/

html, body {
    padding: 0;
    margin: 0;
    font-family: 'Open Sans', sans-serif;
    font-weight: 400;
}
.sandBox{   
    position:relative;
    background-color: #00FF00;
    width: 1440px;
    max-width:100%;
    min-height:560px;
    margin:auto;
    text-align:center;
}
.options{
    position:absolute;
    bottom:0;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: flex-end;
    width: 100%;
}
.option-group{
    width:240px;
    height:75px;
    display: inline-block;
    margin-left:10px;
    margin-right:10px;
    background-color: #EC3538;
}
.active-option-group{
    text-align:left;
    height: 240px;
}
.active-option-group div{
    padding: 10px;
}

这里有一个关于 flexbox 布局细节的非常好的教程:

http://css-tricks.com/snippets/css/a-guide-to-flexbox/

更新:

这是 .options 的扩展 CSS block ，应该涵盖大多数浏览器。我在 Safari、Firefox 和 Chrome 中使用过这种布局，但没有在各种版本的 IE 上测试过。您可以在此处阅读有关 IE 版本支持的更多信息 https://msdn.microsoft.com/en-us/library/ie/dn265027%28v=vs.85%29.aspx :

.options{
    position:absolute;
    bottom:0;
    width: 100%;
    display: -ms-flexbox;      /* TWEENER - IE 10 */
    display: -webkit-flex;     /* NEW - Chrome */
    display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */
    flex-direction: row;
    -webkit-flex-direction: row;
    justify-content: center;
    -webkit-justify-content: center;
    align-items: flex-end;
    -webkit-align-items: center;
}