Imagens lado a lado com texto abaixo centralizado

Olá participantes do fórum!

Tenho uma dúvida com uma div no blog que não consigo solucionar. Espero que alguém possa me ajudar!

Quero deixar as imagens uma ao lado da outra mas com links de texto em baixo de cada uma. Estou usando o código abaixo:

/*.di {position: relative;width:100%; text-align: center; font: 11px/30px Muli; font-weight: bold; text-transform: uppercase; color: transparent; margin: 4px 0 0 0; height: 90px;}
.di a {background:#d34a76; color:#f59695; padding: 4px 10px; border-radius: 3px; display: table; clear:both;}
.di a:hover {background:#f1ece6; color:#624559;}*/

Mas ao utilizar o / no começo e / no final a personalização não aparece (background, fonte, tamanho, etc). Veja na imagem abaixo:

Se eu retiro os caracteres antes e depois do código, dá erro.

/applications/core/interface/imageproxy/imageproxy.php?img=http://i57.tinypic.com/2l8zokp.jpg&key=e414b280539e1eaaad8a1c2a26c9647468871285bd2f6afe0bef1bd7eeced03f" alt="2l8zokp.jpg" />

Alguém sabe como resolver?
Obrigada!