Centrar input verticalmente

hermess87 · #1 (**permalink**) 15/02/2010, 10:20

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!

buzu · #2 (**permalink**) 15/02/2010, 11:14

mira: http://www.jakpsatweb.cz/css/css-ver...-solution.html