Ver Mensaje Individual
  #5 (permalink)  
Antiguo 10/04/2012, 11:06
gugol
 
Fecha de Ingreso: marzo-2012
Mensajes: 49
Antigüedad: 12 años, 1 mes
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>