Question

Please, observe this simple 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;
}​

Output:

How can I change the HTML and/or CSS, so that the elements marked as anchorToMiddle (D1 and D2) be aligned in the middle, right above D3?

Thanks.

Answer 1

I tried to find a solution with some javascript (since the question was tagged with javascript).

If you set text-align to “center” in “anchorToMiddle” the text will be centered but only if you specify the element’s width. To do this, B3..F3 are wrapped inside another div (with id “charspan”):

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

then this new div’s width is calculated and applied to the class “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';
}

Updated Fiddle: http://jsfiddle.net/Espesen/vtLrt/14/