javascript - 如何将 HTML 元素锚定在其他两个元素之间的中心？

Question

请注意这个简单的 jsFiddle：http: //jsfiddle.net/mark69_fnd/vtLrt/10/

HTML：

<div class="char">
  <div>
    <div class="char">A1</div>
    <div class="char anchorToMiddle">D1</div>
    <div class="char anchorToRight">G1</div>
  </div>
  <div>
    <div class="char">A2</div>
    <div class="char anchorToMiddle">D2</div>
    <div class="char anchorToRight">G2</div>
  </div>
  <div>
    <div class="char">A3</div>
    <div class="char">B3</div>
    <div class="char">C3</div>
    <div class="char">D3</div>
    <div class="char">E3</div>
    <div class="char">F3</div>
    <div class="char">G3</div>
  </div>
</div>​

CSS：

.char{
    display: inline-block;
}


.anchorToRight {
    float: right;
}​

输出：

如何更改 HTML 和/或 CSS，以便标记为anchorToMiddle（D1 和 D2）的元素在 D3 正上方的中间对齐？

谢谢。

Answer 1

我试图用一些 javascript 找到解决方案（因为问题是用 javascript 标记的）。

如果在“anchorToMiddle”中将 text-align 设置为“center”，则文本将居中，但前提是您指定了元素的宽度。为此，B3..F3 被包裹在另一个 div 中（id 为“charspan”）：

<div id="charspan" class="char">
    <div class="char">B3</div>
    <!-- etc. -->
</div>

然后计算这个新 div 的宽度并将其应用于“anchorToMiddle”类。

var elems, i, width, span;
elems = document.getElementsByClassName("anchorToMiddle");
span = document.getElementById("charspan");
width = parseInt(window.getComputedStyle(span).width);
for (i = 0; i < elems.length; i++) {
        elems[i].style.width = width + 'px';
}

更新小提琴：http: //jsfiddle.net/Espesen/vtLrt/14/

Answer 2

如果你给它一个合适的宽度然后使用text-align:center;属性，它应该得到修复。

我已经更新了你的FIDDLE

Answer 3

div.anchorToMiddle
{
  width:someWidthValue less than parent;
  margin-left:auto;
  margin-right:auto;
}

Answer 4

为什么不直接制作一个 3x7 的桌子呢？

<table>

    <tr>

        <td>A1</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>D1</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>G1</td>

    </tr>

    <tr>

        <td>A2</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>D2</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>G2</td>

    </tr>

    <tr>

        <td>A3</td>
        <td>B3</td>
        <td>C3</td>
        <td>D3</td>
        <td>E3</td>
        <td>F3</td>
        <td>G3</td>

    </tr>

</table>