Alinear texto Vertical

[fedefrankk]

Buenas a todos, tengo el siguiente boton.

Código HTML:

<div onclick="home1()" class="home" id="home100"><p>Inicio</p></div>
 

y Con CSS quiero alinearlo al meddio de la imagen, creo que algo he hecho mal y repetitivo.

codigo CSS:

Código CSS:

.home{
    font-family:"Century Gothic", "Century Schoolbook", "Century Schoolbook SWA","Arial";
    vertical-align:middle;
    position:absolute;
    width:116px;
    height:35px;
    background-image:url(Img_port/home1.jpg);
    background-repeat:no-repeat;
    top:0px;
    left:139px;}
.home:hover{
    vertical-align:middle;
    /*line-height:17px;*/
    font-family:"Century Gothic", "Century Schoolbook", "Century Schoolbook SWA","Arial";
    font-size:13px;
    text-align:center;
    /*line-height:17px;*/
    font-size:15px;
    position:absolute;background-image:url(Img_port/home2.jpg); cursor:pointer;}
 

Asi esta ahora:



Saludos a todos
fede

[McPinkY18]

para centrar verticalmente se usa el mismo valor del height elemento padre en el elmeento hijo
asi

{height:35px;line-height:35px;}
/* muy importante que el line-height lo coloques luego del font-size */

y si usas un fondo puedes colocar la propiedad

background-position: 0px center;

te hice un ejemplo

http://jsfiddle.net/yFgCs/

aqui usando fondo

http://jsfiddle.net/yFgCs/1/

[fedefrankk]

Hola gracias por responder, algo estoy haciendo mal, alomejor no va dentro de un <li> o <ul>... lamentablemente ni idea.

mi boton:

Código HTML:

<ul>
<div onclick="home1()" class="home" id="home100"><li>Inicio</li></div>
</ul>
 

MI CSS:

Código CSS:

home {
    list-style:none;
    color:#FFF;
    position:absolute;
    font-family:"Century Gothic", "Century Schoolbook", "Century Schoolbook SWA","Arial";
    font-size:14px;
    vertical-align:middle;
    width:116px;
    height:35px;
    background-image:url(Img_port/home1.jpg);
    top:0px;
    left:139px;}
.home:hover {
    font-family:"Century Gothic", "Century Schoolbook", "Century Schoolbook SWA","Arial";
    font-size:14px;
    background-image:url(Img_port/home2.jpg); cursor:pointer;}
 

No se centra el texto queda arriba...
Muchas gracias.!!!

[ArturoGallegos]

amgio @fedefrankk tienes tremendo errorsote en tu html... un elemento del tipo bloquee no puede ir dentro de uno en linea... ese div esta totalmente fuera de lugar.

en dado caso tu html deberia ser

Código HTML:

<ul>
  <li onclick="home1()" class="home" id="home100">Inicio</li>
</ul>
 

y en tu css no veo el line-height que ya te menciono el compañero @McPinkY18 pareciera que no has puesto ni un poco de atención, haga favor de poner en practica el line-height como se lo indicaron y si no le resulta vuelva a comentar.

[BloodShadow]

dale una chequeada a este tema que hice hace poco

[APORTE] vertical-align para elementos de bloque

[cristian_cena]

@Ag666, ul es de bloque! XD, Aunque comparto que el término horroroso esta bien aplicado.

[ArturoGallegos]

Iniciado por cristian_cena

@Ag666, ul es de bloque! XD, Aunque comparto que el término horroroso esta bien aplicado.

jaja!!! tienes razón cristian, es de bloquee me confundí en eso... pero aun así un div no puede estar en esa área como el lo tiene o tenia.

[fedefrankk]

Hola.! Muchisimas gracias a todos por la ayuda.. se han pasado.!!

Gracias por el tiempo

Saludos Federico