Comunidad de diseño web y desarrollo en internet online

Alinear verticalmente

Citar            
MensajeEscrito el 21 Nov 2013 02:49 am
Hola amigos de la comunidad bueno estoy haciendo una barra de navegacion para un proyecto web pero mi problema es que los los <href> quiero alinearlos verticalmente al medio dentro de los <li> pero no puedo hacerlo ya intente algunos codigos pero no puedo alinearlos haber si or ahi algien me podria ayudar se los agradecere. Aca les dejo el codigo que estoy usando

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>
<style type="text/css">
<!--
#main {
width:1074px;
height:650px;
margin:0 auto;
border: red 1px dotted;
text-align:left;
}
body {
background-color:#6CF;
}
#menuhorizontal {
width:1074;

float:none;
margin:0px;
padding:0px
}
#menuhorizontal a {
float:left;
width:203px;
height:30px;
text-decoration:none;
text-align:center;

color:#ff0000;
background-color:#f7f8e8;
padding:3px 5px;
border-right:1px solid red;
}
#menuhorizontal a:hover {

height:50px;
background-color:#336699;

}

#menuhorizontal li {
display:inline;

}

-->
</style>
</head>

<body>
<div id="main">
<ul id ="menuhorizontal">
<li><a href="#">Nosotros</a></li>
<li><a href="#">Productos</a></li>
<li><a href="#">Servicios</a></li>
<li><a href="#">Clientes</a></li>
<li><a href="#">Contactenos</a></li>
</ul>
</div>
</body>
</html>

Por jarvi22

22 de clabLevel



 

chrome
Citar            
MensajeEscrito el 21 Nov 2013 12:08 pm
Como es solo una línea de texto, la puedes centrar aplicando line-height con la misma altura que height.

Código CSS :

#menuhorizontal a {
  height:30px;
  line-height: 30px;
  }

Por walden

Claber

120 de clabLevel



 

safari
Citar            
MensajeEscrito el 21 Nov 2013 04:07 pm
El link "a", es un elemento que remarca el texto que lo contiene "inline". Si le pones padding:3px 5px; solo aplicará los 5px de los lados pero no el de la altura.

Debes tratarlo como si fuera bloque, agrégale display:block. Con eso tomará los valores de altura y los aplicará.

Saludos.

Por nasho

Claber

908 de clabLevel

1 tutorial

Genero:Masculino  

Web Developer

chrome

 

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.