Foros del Web » Creando para Internet » CSS »

¿Cómo centrar vertical dos líneas de texto en menú navegación creado con listas?

Estas en el tema de ¿Cómo centrar vertical dos líneas de texto en menú navegación creado con listas? en el foro de CSS en Foros del Web. En un menú de navegación creado con listas, el centrado vertical de texto se puede hacer con la propiedad line-height siempre que tenga una única ...
  #1 (permalink)  
Antiguo 07/04/2012, 04:30
 
Fecha de Ingreso: marzo-2012
Mensajes: 49
Antigüedad: 10 años, 8 meses
Puntos: 2
¿Cómo centrar vertical dos líneas de texto en menú navegación creado con listas?

En un menú de navegación creado con listas, el centrado vertical de texto se puede hacer con la propiedad line-height siempre que tenga una única línea, pero si quiero poner un elemento de la lista con dos líneas de texto, lo que me centra es la primera, dejándola a la misma altura que las otras.
¿Cómo podría centrar verticalmente elementos de lista que tienen una línea o dos líneas de texto?.
(he visto soluciones pero utilizando DIV's y utilizando la propiedad display: table-cell, pero estoy intentando hacer el menu sin DIV's)
  #2 (permalink)  
Antiguo 07/04/2012, 04:46
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 15 años, 6 meses
Puntos: 539
Respuesta: ¿Cómo centrar vertical dos líneas de texto en menú navegación creado con l

Con pseudoelementos
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #3 (permalink)  
Antiguo 07/04/2012, 12:51
 
Fecha de Ingreso: marzo-2012
Mensajes: 49
Antigüedad: 10 años, 8 meses
Puntos: 2
Respuesta: ¿Cómo centrar vertical dos líneas de texto en menú navegación creado con l

Gracias por la respuesta.
He estado haciendo pruebas, y aunque me centra el texto verticalmente, me deja una separación entre los botones, y la altura no me la respeta.
Aunque entiendo el codigo para añadir algo delante por defecto siempre (por ejemplo), en este caso, no entiendo muy bien la función del código en el centrado.
Seguiré haciendo pruebas a ver si lo consigo solucionar.
  #4 (permalink)  
Antiguo 09/04/2012, 15:52
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 15 años, 6 meses
Puntos: 539
Respuesta: ¿Cómo centrar vertical dos líneas de texto en menú navegación creado con l

¿Puede publicar sus códigos (html+css) implicados en ese elemento?
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #5 (permalink)  
Antiguo 10/04/2012, 11:06
 
Fecha de Ingreso: marzo-2012
Mensajes: 49
Antigüedad: 10 años, 8 meses
Puntos: 2
Respuesta: ¿Cómo centrar vertical dos líneas de texto en menú navegación creado con l

Cita:
Iniciado por kseso? Ver Mensaje
¿Puede publicar sus códigos (html+css) implicados en ese elemento?
Gracias por contestar.

Adjunto el código que he probado a partir del las modificaciones que he realizado en el ejemplo que me adjuntas.

Los botones, que irían con una imagen de fondo para "nav li a" y otra para "nav li a:hover" con este código se me quedan separados unos pixeles.
Y el tamaño en altura de "nav li a"; si lo defino en 35 px, ya no me aparece centrado, y si lo dejo sin definir, para el centrado que realiza "#nav li::before", me ajusta la altura a la del texto.

Voy a intentar poner una imagen de como estoy intentando que quede (en la que no se me centra verticalmente), y como me queda con este codigo.

Gracias y un saludo.


Código HTML:
.Menu {
	height: 35px;
	width: 960px;
	margin-top: 2px;
}

#nav {
	list-style:none;
	padding:0;
	display: block;
}

#nav li {
	background: #E1C4BD;
	text-align: center;
	width: 96px;
	height: 35px;
	margin-top: 0;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;
	display: inline-block;
}

#nav li a {
	display: inline-block;
	vertical-align: middle;
	width: 95%;
	border: #a0a0a0 solid 1px;
	background: #f5f5f5;
	text-align: center;
	font-size: .9em;
	font-family: monospace;
}

#nav li::before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: 0 em; /* espaciado entre .ejemplo:before y .contenido */
/* Para ver el pseudoelemento
  background: #9DC425; width: 5px;
*/
}




-->
</style></head>

<body>

<div class="container">
  <div class="content">
    
     <div class="Menu">
  
        <ul id="nav"> 
  
            <li><a href="#">1 línea</a></li>
            <li><a href="#">dos líneas dos líneas</a></li>
            <li><a href="#">dos líneas dos líneas</a></li>
  
          
        <!-- end lista navegación .nav --></ul>
  
     <!-- end .menu --></div>
    
    
    <!-- end .content --></div>
  <!-- end .container --></div>
</body> 
  #6 (permalink)  
Antiguo 10/04/2012, 11:22
 
Fecha de Ingreso: marzo-2012
Mensajes: 49
Antigüedad: 10 años, 8 meses
Puntos: 2
Respuesta: ¿Cómo centrar vertical dos líneas de texto en menú navegación creado con l

La imagen de arriba es como me gustaría que quedara, y la de abajo es con el código de centrado





Última edición por gugol; 10/04/2012 a las 11:27
  #7 (permalink)  
Antiguo 13/04/2012, 14:09
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 15 años, 6 meses
Puntos: 539
Respuesta: ¿Cómo centrar vertical dos líneas de texto en menú navegación creado con l

Disculpe la tardanza. Falta de tiempo por mi parte.
Cita:
Los botones, que irían con una imagen de fondo para "nav li a" y otra para "nav li a:hover" con este código se me quedan separados unos pixeles. <-- Posíblemente sea por utilizar /inline-block/ Es su marca característica. Aquí encontrará diversos métodos para evitar esos píxeles de separación entre items (debido al letter-spacing).

Y el tamaño en altura de "nav li a"; si lo defino en 35 px, ya no me aparece centrado, y si lo dejo sin definir, para el centrado que realiza "#nav li::before", me ajusta la altura a la del texto. <-- Probó a definir la altura en a::before en vez de en el enlace?
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #8 (permalink)  
Antiguo 14/04/2012, 10:49
 
Fecha de Ingreso: marzo-2012
Mensajes: 49
Antigüedad: 10 años, 8 meses
Puntos: 2
Respuesta: ¿Cómo centrar vertical dos líneas de texto en menú navegación creado con l

No hay problema con la tardanza. Gracias por contestar.
Voy a probar lo que me propone.
Un saludo.

Etiquetas: creado, 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 10:10.