While experimenting with CSS, I encountered a challenge in creating a simple horizontal stack of words. It seems impossible to align the content of one div in the center while the other div is empty.
For example, I tried doing this in Chrome and here is the code snippet: http://jsfiddle.net/mncmN/
<div style="margin: 0px; height:50px; width:100%; border-bottom: solid 1px rgba(50,50,50,0.1); background: url(menu-back.png); background-repeat: repeat-x; font-family: helvetica; color: rgba(50,50,50,0.8);">
<div style="text-align:center; display: inline-block; "> <a>Summary</a>
</div>
<div style="text-align:center; display: inline-block; height: 100%; border-right: solid gray 1px;"></div>
</div>
It raises the question of why it doesn't align as expected.
In summary, I am looking to achieve three things simultaneously:
1) Inline div blocks that stack horizontally
2) Center alignment of text within them (relative to parent container).
3) Empty div boxes serving as borders.