Display: table and text alignment do not work

Question

I have an html structure:

<div class="campain"> <div class="campainText"> <a href="#"><h2>Ny app til iPhone og iPad</h2></a> <a href="#"><h2>Tips og vinn</h2></a> </div> <div class="campainPicture"> Picture goes here </div><div class="clear"></div> </div> 

And I would like campainText to be aligned correctly. Css for this item:

 font-family: 'Spinnaker', sans-serif; font-size: 17px; color: #FFFFFF; background-color: #A2AD00; display: table; padding: 4px; margin: 4px 4px 4px 4px; text-decoration: none; 

I know the rest of css is working. The problem is that the text is left-aligned if I include the table parameter in the display field. As soon as I remove this, it works as expected. Are there any workarounds for this, or do I need to use display: inline and <br /> tags?

Answer 1

Fiddle: http://jsfiddle.net/xbNCZ/

"Table + text-align:right does not work" because by default the table element does not stretch to full width. Add width:100% to get the desired result.

Before / After setting width:100% .