Foros del Web » Creando para Internet » CSS »

Centrar input verticalmente

Estas en el tema de Centrar input verticalmente en el foro de CSS en Foros del Web. Hola gente ando con un problema de diseno, necesito centrar verticalmente un elemento "input" dentro de un div, obviamente en Firefox funciona bien, pero en ...
  #1 (permalink)  
Antiguo 15/02/2010, 10:20
 
Fecha de Ingreso: julio-2007
Mensajes: 178
Antigüedad: 10 años, 4 meses
Puntos: 1
Centrar input verticalmente

Hola gente ando con un problema de diseno, necesito centrar verticalmente un elemento "input" dentro de un div, obviamente en Firefox funciona bien, pero en ie, no encuentro la forma.. dejo el codigo a ver si pueden ayudarme:

Código HTML:
<style type="text/css">
<!--
.caja_buscador2 {
	background-image: url(images/rrrrrrrrr.gif);
	background-repeat: repeat-x;
	height: 7px;
	overflow: hidden;
}
.centrar {
	width:900px;
	margin-top: 0;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;
}
.vinculoazul {
	float: right;
}
.caja_buscador {
	background-image: url(images/ppppp.gif);
	background-repeat: repeat-x;
	height: 41px;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-top-style: none;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-right-color: #4C9AC6;
	border-bottom-color: #4C9AC6;
	border-left-color: #4C9AC6;
}
.celdatop {
	overflow: hidden;
	width: 100%;
	height: 4px;
}
.tablaform {
	height: 100%;
	overflow: hidden;
}
.izquierda {
	text-align: left;
	float: left;
}
.derecha {
	text-align: right;
	float: right;
}
a {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
}
.azulnegrita {
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
	color: #F60;
}
a:link {
	text-decoration: none;
}
a:visited {
	text-decoration: none;
}
a:hover {
	text-decoration: underline;
}
a:active {
	text-decoration: underline;
} 
input {
	background-color: #DAE6FA;
	border: 1px solid #09F;
	width: 300px;
}
.buscador {
	overflow: hidden;
	height: 27px;
	clear: both;
}
-->
</style>
</head>

<body>
<br>
<div class="centrar">
<div class="logotop">
  <table border="0" cellpadding="0" cellspacing="0" class="celdatop">
    <tr>
      <td><img src="images/interfaceweb_03.gif" width="247" height="41" /></td>
      <td>&nbsp;</td>
      <td align="right"><a href="comocomprar.html\">Como comprar</a> <span class="azulnegrita">+</span>
        <br />
        <a href="comoobtener.html">Como obtener mi compra</a> <span class="azulnegrita">+ </span></td>
      </tr>
  </table>
</div>
<div class="caja_buscador2">
  <table border="0" cellpadding="0" cellspacing="0" class="celdatop">
    <tr>
      <td><img src="images/cornertop.gif" width="8" height="7" class="izquierda" /></td>
      
      <td><img src="images/cornertop2.gif" width="8" height="7" class="derecha" /></td>
    </tr>
  </table>
</div>
<div class="caja_buscador"><table border="0" cellpadding="0" cellspacing="0" class="tablaform">
  <tr>
    <td><form id="form1" name="form1" method="post" action="">
  <label>
    <input type="text" name="buscar" id="buscar" />
  </label>
</form></td>
  </tr>
</table></div>

</div>
</body>
</html> 
Si miran el codigo van a notar que el elemento a centrar es input, y probe de vairas maneras, con div, con tablas, centrando el formulario... pero no puedo lograrlo... bueno desde ya les agradesco, suerte!
  #2 (permalink)  
Antiguo 15/02/2010, 11:14
Avatar de buzu  
Fecha de Ingreso: octubre-2006
Ubicación: San Francisco, CA
Mensajes: 2.168
Antigüedad: 11 años, 1 mes
Puntos: 122
Respuesta: Centrar input verticalmente

mira: http://www.jakpsatweb.cz/css/css-ver...-solution.html
__________________
twitter: @imbuzu

Etiquetas: input
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 22:34.