Tengo una duda, y es algo que siempre he resuelto con chapuzas, pero quiero aprender como hacerlo de una vez.
Tengo un contenedor general, llamado en este caso cont_numero, y dentro de este tres elementos dentro de un div llamemolo contenido, los cuales son:
1) combo
2) input text
3) un texto
Ademas de un texto descriptivo en el top del contenedor (cont_numero), el codigo html en este momento esta de la siguiente manera:
Código HTML:
<div id="cont_numero">
<label for="tel_cel1">Ingresa tu número a recargar</label>
<div id="contenido">
<span>
<select name="cel_pre1" id="cel_pre1" class="combo">
<option value="093">093</option>
<option value="094">094</option>
<option value="095">095</option>
</select>
</span>
<span><input type="text" name="tel_cel1" id="tel_cel1" size="17" maxlength="6" value="" onblur= "javascript: unir();"></span>
<span>(6 digitos)</span>
</div>
</div>
y el CSS esta de la siguiente manera:
Código:
#promociones #cont_recarga_ttop #cont_numero
{
margin-top: 30px;
background:url(../img/bg_cont_recarga_monto.jpg) repeat-y;
height: 80px;
text-align:center;
}
#promociones #cont_recarga_ttop #contenido
{
width: 100%;
position: absolute;
margin-left: 100px; //OJO CON ESTA LINEA, ES LA CHAPUZA
}
#promociones #cont_recarga_ttop span
{
display:block;
padding: 3px 10px;
text-decoration: none;
float: left;
}
#promociones #cont_recarga_ttop .combo
{
height: 28px;
color:#0066CC;
border:solid;
border-width:thin;
}
La idea es que el div contenido este centrado, pero no logro hacerlo, ya intente con float, margin: 0 auto; y varias cosas y no logro hacer que se centre, verifico con firebug y los elementos estan bien, pero se esta utilizando XHTML entonces nose si sera que no sea el codigo el malo sino alguna herencia
Que estoy haciendo mal, o como deberia hacerlo para que de ahora en adelante no tenga que estar haciendo chapuzas.
pd: olvide mencionar, el combo nunca logro ajustarlo al mismo nivel del input textbox....
Gracias por sus valiosas opiniones