Foros del Web » Creando para Internet » CSS »

Alinear texto Vertical

Estas en el tema de Alinear texto Vertical en el foro de CSS en Foros del Web. Buenas a todos, tengo el siguiente boton. @import url("http://static.forosdelweb.com/clientscript/vbulletin_css/geshi.css"); Código HTML: Ver original < div onclick = "home1()" class = "home" id = "home100" >< ...
  #1 (permalink)  
Antiguo 23/05/2011, 18:02
Avatar de fedefrankk  
Fecha de Ingreso: agosto-2007
Mensajes: 782
Antigüedad: 9 años, 11 meses
Puntos: 7
Pregunta Alinear texto Vertical

Buenas a todos, tengo el siguiente boton.

Código HTML:
Ver original
  1. <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:
Ver original
  1. .home{
  2.     font-family:"Century Gothic", "Century Schoolbook", "Century Schoolbook SWA","Arial";
  3.     vertical-align:middle;
  4.     position:absolute;
  5.     width:116px;
  6.     height:35px;
  7.     background-image:url(Img_port/home1.jpg);
  8.     background-repeat:no-repeat;
  9.     top:0px;
  10.     left:139px;}
  11. .home:hover{
  12.     vertical-align:middle;
  13.     /*line-height:17px;*/
  14.     font-family:"Century Gothic", "Century Schoolbook", "Century Schoolbook SWA","Arial";
  15.     font-size:13px;
  16.     text-align:center;
  17.     /*line-height:17px;*/
  18.     font-size:15px;
  19.     position:absolute;background-image:url(Img_port/home2.jpg); cursor:pointer;}

Asi esta ahora:



Saludos a todos
fede
  #2 (permalink)  
Antiguo 23/05/2011, 18:09
 
Fecha de Ingreso: diciembre-2008
Ubicación: Cordoba
Mensajes: 127
Antigüedad: 8 años, 7 meses
Puntos: 17
Respuesta: Alinear texto Vertical

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/

Última edición por McPinkY18; 23/05/2011 a las 18:20
  #3 (permalink)  
Antiguo 24/05/2011, 09:29
Avatar de fedefrankk  
Fecha de Ingreso: agosto-2007
Mensajes: 782
Antigüedad: 9 años, 11 meses
Puntos: 7
Pregunta Respuesta: Alinear texto Vertical

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:
Ver original
  1. <ul>
  2. <div onclick="home1()" class="home" id="home100"><li>Inicio</li></div>
  3. </ul>

MI CSS:

Código CSS:
Ver original
  1. home {
  2.     list-style:none;
  3.     color:#FFF;
  4.     position:absolute;
  5.     font-family:"Century Gothic", "Century Schoolbook", "Century Schoolbook SWA","Arial";
  6.     font-size:14px;
  7.     vertical-align:middle;
  8.     width:116px;
  9.     height:35px;
  10.     background-image:url(Img_port/home1.jpg);
  11.     top:0px;
  12.     left:139px;}
  13. .home:hover {
  14.     font-family:"Century Gothic", "Century Schoolbook", "Century Schoolbook SWA","Arial";
  15.     font-size:14px;
  16.     background-image:url(Img_port/home2.jpg); cursor:pointer;}

No se centra el texto queda arriba...
Muchas gracias.!!!
  #4 (permalink)  
Antiguo 24/05/2011, 10:24
Avatar de ArturoGallegos
Colaborador
 
Fecha de Ingreso: febrero-2008
Ubicación: SLP, México
Mensajes: 5.717
Antigüedad: 9 años, 5 meses
Puntos: 920
Respuesta: Alinear texto Vertical

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:
Ver original
  1. <ul>
  2.   <li onclick="home1()" class="home" id="home100">Inicio</li>
  3. </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.
__________________
Toda ayuda se proporciona exclusivamente en el foro, no skype, no mensajes privados u otro medio....
  #5 (permalink)  
Antiguo 25/05/2011, 10:11
Avatar de BloodShadow  
Fecha de Ingreso: marzo-2010
Ubicación: El Salvador
Mensajes: 393
Antigüedad: 7 años, 4 meses
Puntos: 52
Respuesta: Alinear texto Vertical

dale una chequeada a este tema que hice hace poco

[APORTE] vertical-align para elementos de bloque
  #6 (permalink)  
Antiguo 25/05/2011, 16:39
Avatar de cristian_cena
Colaborador
 
Fecha de Ingreso: junio-2009
Mensajes: 2.244
Antigüedad: 8 años, 1 mes
Puntos: 269
Respuesta: Alinear texto Vertical

@Ag666, ul es de bloque! XD, Aunque comparto que el término horroroso esta bien aplicado.
  #7 (permalink)  
Antiguo 25/05/2011, 17:27
Avatar de ArturoGallegos
Colaborador
 
Fecha de Ingreso: febrero-2008
Ubicación: SLP, México
Mensajes: 5.717
Antigüedad: 9 años, 5 meses
Puntos: 920
Respuesta: Alinear texto Vertical

Cita:
Iniciado por cristian_cena Ver Mensaje
@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.
__________________
Toda ayuda se proporciona exclusivamente en el foro, no skype, no mensajes privados u otro medio....
  #8 (permalink)  
Antiguo 27/05/2011, 13:41
Avatar de fedefrankk  
Fecha de Ingreso: agosto-2007
Mensajes: 782
Antigüedad: 9 años, 11 meses
Puntos: 7
Respuesta: Alinear texto Vertical

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

Gracias por el tiempo

Saludos Federico

Etiquetas: alinear, vertical
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 12:48.