Centrado en maquetacion

[xcars]

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&uacute;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

[exxqizofrenicoo]

yo lo que haria seria al elemento de id contenido le daria un ancho nose 300px y luego un margin:0 auto 0 auto;
y despues debajo de los span crearia un div que acabe con los float de los span
<div style="clear:both"></div>