Question

有没有办法将“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

将div内部对齐到底部中心，而不创建包装div或在px中使用margin / left

2 个答案: