CSS text-align by parent smaller than child
<p>I want the child to align centraly to its parent. The parent is smaller and that's what's causing the problem. <a href="https://jsfiddle.net/mkvaL7uy" rel="nofollow">https://jsfiddle.net/mkvaL7uy</a></p>

<p>The only solution I see here is to give the parent a fixed width - make it really wide + <code>height:0px</code>, create another element to replace the invisible parent, whereafter the child can align properly. <a href="https://jsfiddle.net/mkvaL7uy/1" rel="nofollow">https://jsfiddle.net/mkvaL7uy/1</a></p>

<p>Is there some other <strong>non width-dependant</strong> way to do this?</p>