css布局对齐底部和中心

Question

文档是这样的:

http://jsfiddle.net/3ty4gvda/

<div class="middle-row">
        <div class="middle-row-titles">
            <h2>This is a header</h2>
            <p>This is a paragraph</p>
        </div>
        <div class="middle-row-graphs">
            <div class="graph-column columnss">
                <h2>12%</h2>
                <div class="graph first-graph">
                </div>
                <p>caption four</p>
            </div>
            <div class="graph-column columnss">
                <h2>18%</h2>
                <div class="graph second-graph">
                </div>
                <p>caption three</p>
            </div>
            <div class="graph-column columnss">
                <h2>22%</h2>
                <div class="graph third-graph">
                </div>
                <p>caption two</p>
            </div>
            <div class="graph-column">
                <h2>23%</h2>
                <div class="graph fourth-graph">
                </div>
                <p>caption one</p>
            </div>
            <div style="clear: both"></div>
        </div>

    </div>

如您所见，它有 4 列代表一个图表。我有两个问题:

1. 如何将所有这些图表放在中间而不是放在左边？
2. 有没有办法将这些栏与父 div 的底部对齐？条形图的标题和底线应具有相同的高度。

我想在没有 flexbox 的情况下实现这些，因为它在 IE 中不起作用。谢谢

问题已解决:请查看下面的“Mary Melody”评论。

Answer 1

在图形列中插入了新的 div，并且只使用相对位置和绝对位置，

.graph-column {
    position: relative;
    height: 222px;
    width: 150px;
}
.column-inside {
    position: absolute;
    bottom: 0;
}
.column-inside h2 {
    text-align:center;
}

<div class="graph-column columnss">
   <div class="column-inside">
       <h2>12%</h2>
       <div class="graph first-graph">
       </div>
       <p>caption four</p>
   </div>
</div>

你可以在这里查看http://jsfiddle.net/3ty4gvda/3/