Pantalla: mesa y text-align está trabajando

Question

Tengo una estructura html así:

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

Y me gustaría la campainText sea alineación derecha. El css para este elemento es la siguiente:

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; 

Yo sé que el resto de la CSS está trabajando. El problema es que el texto se alinea a la izquierda si incluyo la opción de tabla en el campo de visualización. Tan pronto como elimine esto, funciona como se esperaba. ¿Hay alguna solución para esto, o tengo que usar las etiquetas display: inline y <br />?

Answer 1

violín: http://jsfiddle.net/xbNCZ/

"Tabla + text-align:right no funciona", debido a que un elemento de la tabla no se extienden a toda la anchura por defecto. Agregue width:100% para obtener el resultado deseado.

Before/After configuración width:100%.