Mover texto verticalmente dentro de un DIV

[Ooze3d]

Hola,

Estoy liado con un problema que me supongo que será una tontería, pero no consigo encontrar nada al respecto.

Tengo un link dentro de un DIV que quiero convertir en un botón. Por ahora todo bien. Me ha dejado modificar el estilo del texto, quitarle el subrayado, poner una imagen de fondo, etc. El único problema que tengo es que el texto del link está pegado a la parte superior del div y no soy capaz de moverlo hacia abajo. Lo único que ha funcionado hasta ahora ha sido aumentar el "line-height", pero llega un momento en que me aumenta el tamaño del div y no me vale.

Qué puedo hacer?

Muchas gracias.

[Oscar_Hidro]

Si pudieras poner algo de codigo seria de gran ayuda. De momento prueba darle un margin-top:Xpx; haber si te avienta para abajo el boton

[Ooze3d]

No ha funcionado. Os paso la parte HTML. La parte afectada es el "<a href="index.php?do=new" class="content">Start NEW Fantasy</a>"

<div id="middle_container">
<div id="side_bottom_left"></div>
<div id="full_page_wrapper">
<div id="new_fantasy">
<a href="index.php?do=new" class="content">Start NEW Fantasy</a>
</div>
<div id="categories">
<div id="cat_content"> <? include('includes/categories.php'); ?> </div>
</div>
<div id="main">
<div id="main_content"></div>
</div>
<div id="ad_section_one">
<div id="ad_one"></div>
<div id="ad_two"></div>
</div>
<div id="ad_section_two">
<div id="ad_three"></div>
<div id="ad_four"></div>
<div id="ad_five"></div>
</div>
<div id="footer">
<div id="footer_content"></div>
</div>
</div>
<div id="side_bottom_right"></div>
</div>
</div>

Y el CSS aplicado a esa zona:

#new_fantasy
{
width: 244px;
height: 42px;
margin: 0 auto;
}
a.content
{
display:block;
width: 244px;
height: 42px;
background-image:url('images/button_new.png');
background-position:top;
position:relative;
top: 10px;
z-index: 10;
font: 15px Courier;
font-weight:600;
color:#906;
text-shadow:-2px -2px 0px #300;
text-shadow:1px 1px 0px #FF9;
text-decoration:none;
text-align:center;
}
a.content:hover
{
background-position:center;
}
a.content:active
{
background-position:bottom;
}

[Ooze3d]

Como veis, el fondo tiene 3 partes que se van mostrando según haya o no contacto con el cursor. Lo del z-index lo uso porque tengo una serie de sombras semitransparentes en png cubriendo la web y subo de nivel solo las zonas que necesitan interacción (botones, formularios...).

El CSS está un poco desordenado porque este es de mis primeros proyectos desde cero y voy añadiendo a medida que voy necesitando.

El resto creo que es bastante explicativo.

Muchas gracias!

[Ooze3d]

SOLUCIONADO!!

Una solución poco ortodoxa, pero funciona. Os dejo el CSS. Si alguien quiere que se lo explique, lo hago.

#new_fantasy
{
display:block;
background-image:url('images/button_new.png');
background-position:top;
position:relative;
width: 244px;
height: 42px;
top: 10px;
margin: 0 auto;
z-index: 10;
}
a.content
{
display:block;
width: 244px;
height: 21px;
position:absolute;
padding-top:21px;
z-index: 10;
font: 15px Courier;
font-weight:600;
color:#906;
text-shadow:-2px -2px 0px #300;
text-shadow:1px 1px 0px #FF9;
text-decoration:none;
text-align:center;
}
#new_fantasy:hover
{
background-position:center;
}
#new_fantasy:active
{
background-position:bottom;
}