Kindly, take a look at this straightforward 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:
In what ways can I modify the HTML and/or CSS to have the items labeled as anchorToMiddle (D1 and D2) centered in the middle directly above D3?
Thank you.