Wyświetlacz: stół i text-align prawo nie działa

Question

Mam html strukturę tak:

<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> 

A ja lubię campainText być tuż-align. Parametr css dla tego elementu jest następujący:

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; 

Wiem, że działa reszta css. Problem polega na tym, że tekst jest wyrównany do lewej, jeśli uwzględnię opcję tabeli w polu wyświetlania. Zaraz po usunięciu tego działa zgodnie z oczekiwaniami. Czy są jakieś obejścia tego problemu, czy też muszę używać znaczników display: inline i <br />?

Answer 1

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

"Stół + text-align:right nie działa", ponieważ element tabeli nie rozciągnąć do pełnej szerokości domyślnie. Dodaj width:100%, aby uzyskać pożądany wynik.

Before/After ustawienie width:100%.