title: How to anchor an HTML element in the center between two other elements?
body: <p>Please, observe this simple jsFiddle: <a href="http://jsfiddle.net/mark69_fnd/vtLrt/10/" rel="nofollow noreferrer">http://jsfiddle.net/mark69_fnd/vtLrt/10/</a></p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="char"&gt;
    &lt;div&gt;
      &lt;div class="char"&gt;A1&lt;/div&gt;
      &lt;div class="char anchorToMiddle"&gt;D1&lt;/div&gt;
      &lt;div class="char anchorToRight"&gt;G1&lt;/div&gt;
    &lt;/div&gt;
    &lt;div&gt;
      &lt;div class="char"&gt;A2&lt;/div&gt;
      &lt;div class="char anchorToMiddle"&gt;D2&lt;/div&gt;
      &lt;div class="char anchorToRight"&gt;G2&lt;/div&gt;
    &lt;/div&gt;
    &lt;div&gt;
      &lt;div class="char"&gt;A3&lt;/div&gt;
      &lt;div class="char"&gt;B3&lt;/div&gt;
      &lt;div class="char"&gt;C3&lt;/div&gt;
      &lt;div class="char"&gt;D3&lt;/div&gt;
      &lt;div class="char"&gt;E3&lt;/div&gt;
      &lt;div class="char"&gt;F3&lt;/div&gt;
      &lt;div class="char"&gt;G3&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;​
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.char{
      display: inline-block;
  }
  
  
  .anchorToRight {
      float: right;
  }​
  </code></pre>
  
  <p>Output:</p>
  
  <p><img src="https://i.stack.imgur.com/Y0KI3.png" alt="enter image description here"></p>
  
  <p>How can I change the HTML and/or CSS, so that the elements marked as <code>anchorToMiddle</code> (D1 and D2) be aligned in the middle, right above D3?</p>
  
  <p>Thanks.</p>