将内部 div 与底部中心对齐，而不创建包装 div 或在 px 中使用边距/左侧

Question

请参阅 JSfiddle： http://jsfiddle.net/76yKL/

有没有办法将 "ruler-mark-short" 和 "ruler-mark-high" div 对齐到它们父母的底部 和 中心（“ruler-mark-container”）？

由于“ruler-mark-short”和“ruler-mark-high”的宽度可以通过 JavaScript 动态更改，我不能使用 'margin' 或 'left' 以像素为单位。 所以，我必须使用“margin: 0 auto”或“text-align: center”之类的东西，但这些都不起作用。

我在不使用额外的包装容器的情况下将标尺标记与底部和中心对齐。

感谢您的帮助。

来自上述 JSfiddle 的代码：

HTML：

<div class="container">
    <div class="ruler">
        <div class="ruler-mark-container">
            <div class="ruler-mark-high"></div>
        </div>
        <div class="ruler-mark-container">
            <div class="ruler-mark-short"></div>
        </div>
        <div class="ruler-mark-container">
            <div class="ruler-mark-short"></div>
        </div>
        <div class="ruler-mark-container">
            <div class="ruler-mark-short"></div>
        </div>
        <div class="ruler-mark-container">
            <div class="ruler-mark-short"></div>
        </div>
        <div class="ruler-mark-container">
            <div class="ruler-mark-high"></div>
        </div>
    </div>
</div>

CSS：

.container {
    border: 1px solid grey;
    position: absolute;
    width: 700px;
    height: 200px;
}

.ruler {
    border: 1px solid orange;
    position: absolute;
    width: 100%;
    height: 100px;
    bottom: 0px;
}

.ruler-mark-container {
    border: 1px solid blue;
    position: relative;
    width: 30px;
    height: 100%;
    /*display: inline-block;*/
    float: left;
    bottom: 0px;
}

.ruler-mark-high {
    position: absolute;
    border: 1px solid black;
    background-color: grey;
    bottom: 0px;
    width: 3px;
    height: 50px;
}

.ruler-mark-short {
    position: absolute;
    border: 1px solid black;
    background-color: grey;
    bottom: 0px;
    width: 3px;
    height: 25px;
}

Answer 1

text-align:center 不适用于绝对定位的元素。所以删除绝对位置，并使用display:inline-block 格式化它们。

如果没有绝对定位，它们当然不会再处于底部。要解决此问题，请停止浮动容器元素，并将它们显示为 table-cell，并将 vertical-align:bottom 添加到容器和标记中。

http://jsfiddle.net/76yKL/7/

Answer 2

你只需要添加以下css：

.ruler-mark-short, .ruler-mark-high{
    left: 50%;
    margin-left: -1.5px;
}

Working Fiddle

更新：（IE9+）

.ruler-mark-short, .ruler-mark-high{
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    /* Add other vendor prefixes here */
}

Working Fiddle