Javascript 如何在两个其他元素之间的中间锚定HTML元素？

请遵守以下简单的JSFIDLE：

HTML:

输出：

如何更改HTML和/或CSS，以便标记为<代码>锚文本（D1和D2）的元素在中间对齐，在D3之上？

谢谢。

div.anchortomidle
{
宽度：someWidthValue小于父级；
左边距：自动；
右边距：自动；
}

div.anchortomidle
{
宽度：someWidthValue小于父级；
左边距：自动；
右边距：自动；
}

如果您给它一个合适的宽度，然后使用

文本对齐：居中属性，它应该得到修复

我已经更新了你的
，如果你给它一个合适的宽度，然后使用
文本对齐：居中属性，它应该得到修复

我已经更新了你的
为什么不干脆做一个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>


A1
D1
G1
A2
D2
G2
A3
地下三层
C3
D3
E3
F3
G3
为什么不制作一张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>


A1
D1
G1
A2
D2
G2
A3
地下三层
C3
D3
E3
F3
G3
我试图用一些javascript找到解决方案（因为问题是用javascript标记的）

如果在“Anchortomidle”中将“文本对齐”设置为“中心”，则文本将居中，但仅当指定元素的宽度时。为此，B3..F3被包装在另一个div中（id为“charspan”）：


地下三层

然后计算新div的宽度并将其应用于类“Anchortomidle”

var元素，i，宽度，跨度；
elems=document.getElementsByClassName（“Anchortomidle”）；
span=document.getElementById（“charspan”）；
宽度=parseInt（window.getComputedStyle（span.width）；
对于（i=0；i

更新的Fiddle:
我试图用一些javascript找到解决方案（因为这个问题是用javascript标记的）

如果在“Anchortomidle”中将“文本对齐”设置为“中心”，则文本将居中，但仅当指定元素的宽度时。为此，B3..F3被包装在另一个div中（id为“charspan”）：


地下三层

然后计算新div的宽度并将其应用于类“Anchortomidle”

var元素，i，宽度，跨度；
elems=document.getElementsByClassName（“Anchortomidle”）；
span=document.getElementById（“charspan”）；
宽度=parseInt（window.getComputedStyle（span.width）；
对于（i=0；i

更新的Fiddle:
所以，需要一个javascript来计算
someWidthValue
？嗯，我不知道。这是你的页面。这个div的宽度是基于其他东西的宽度还是恒定的？因此，需要一个javascript来计算
someWidthValue
？嗯，我不知道。这是你的页面。该div的宽度是基于其他内容的宽度还是恒定的？数据不是表格形式。A1，A2。。。这些都是为了使示例变得简单。实际上，它们是带有字段的div块。数据不是表格。A1，A2。。。这些都是为了使示例变得简单。事实上，它们是带有字段的div块。我希望有一个HTML/CSS唯一的解决方案。但是，在没有其他选择的情况下…我希望有一个HTML/CSS唯一的解决方案。但是，在没有其他选择的情况下。。。
<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>

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

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';
}