javascript - 他の2つの要素の間の中央に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;
}​

出力：

anchorToMiddle(D1 および D2) としてマークされた要素が D3 の真上の中央に配置されるように、HTML および/または CSS を変更するにはどうすればよいですか?

ありがとう。

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>