Alineación de DIVs

[kurgari]

Buenos días, justo he empezado a migrar des de las TBALAS a las CSSmediantes las dos partes de "migración sin dolor". Mi problema reside en como alinear DIVs que se encuentren dentro de otro DIV. Concretamente tengo:

Código HTML:

<div class="subcontainer2">
            <div id="v" class="buttonClicked" onmouseover="function1('v')" onmouseout="function2('v')"
                onclick="function3('v')">
                <img id="imgV" src="Resources/imgs/vertical.png" height="100" />
                <div>
                    <label>
                        <strong>Vertical</strong></label></div>
            </div>
            <div id="h" class="buttonNormal" onmouseover="function1('h')" onmouseout="function2('h')"
                onclick="function3('h')">
                <img id="imgH" src="Resources/imgs/horitzontal.png" height="100" />
                <div>
                    <label>
                        <strong>Horizontal</strong></label></div>
            </div>
        </div> 

Que esta dentro de otro DIV que contiene otros 2 como este. El codio CSS que uso es:

Código:

.subcontainer2
{
    width: 500px;
    height: 190px;
    
    margin-top: 5px;
    margin-bottom: 5px;
    
    text-align:center;
    position:relative;
    
    border:1px solid #000;
    background-color:White;
    font-family:Arial;
    font-size:small;
    color:Black;
    text-align:center;
}

.buttonNormal
{
    float:left;
    
	width:110px;
	height:125px;
	
	border:1px solid #000;
	background-color:#E2EBED;
	font-family:Arial;
	font-size:small;
	color:Gray;
	text-align:center;
	
	margin: 20px;
}

.buttonOver
{
    float:left;
    
	width:110px;
	height:125px;
	
	border:1px solid #000;
	background-color:#0066CC;
	font-family:Arial;
	font-size:small;
	color:#DDDDDD;
	text-align:center;
	
	margin: 20px;
}

.buttonClicked
{
    float:left;
    
	width:110px;
	height:125px;
	
	border:1px solid #000;
	background-color:#FF6633;
	font-family:Arial;
	font-size:small;
	color:#DDDDDD;
	text-align:center;
	
	margin: 20px;
}

Mi pregunta es: ¿Como puedo alinear esas dos DIV que se encuentran dentro de "subcontainer2" al centro de la división? Ya que tal y como lo tengo queda a la izquierda.

Muhisimas gracias de antemano.

[ruben-et]

<div class="subcontainer2" align="center">

[locoxchacho]

fijate que en el primero pusiste dos veces text-align.. quizas eso hace que no se centre.. pero no hace falta poner align=Center en el html.. teoricamente, con eso, se centra.. igual, fijate que no ocupe todo el ancho del div.. proba poniendo un solo div dentro del contenedor a ver si te lo centra, y si lo hace, pone los otros...

si no funciona, entonces... prueba con el contenedor, ponerlo
margin:0 auto.. esto teoricamente tambien lo centra...

un saludo!

pablo

[locoxchacho]

bueno.. viendo el codigo.. en tu caso seria
margin:5px auto;

un saludo.

[Mikmoro]

Yo diría que si deben mantener la distancia entre ellas, una manera de hacerlo sería añadir una caja que sirva para centrar:

<div class="subcontainer2">
<div class="centrador">
<div id="v" class="buttonClicked" onmouseover="function1('v')" onmouseout="function2('v')"
onclick="function3('v')">
<img id="imgV" src="Resources/imgs/vertical.png" height="100" />
<div>
<label>
<strong>Vertical</strong></label></div>
</div>
<div id="h" class="buttonNormal" onmouseover="function1('h')" onmouseout="function2('h')"
onclick="function3('h')">
<img id="imgH" src="Resources/imgs/horitzontal.png" height="100" />
<div>
<label>
<strong>Horizontal</strong></label></div>
</div>
</div>
</div>

y en la CSS hacer estos cambios:

.buttonNormal{float:left;
width:110px;
height:125px;
border:1px solid #000;
background-color:#E2EBED;
font-family:Arial;
font-size:small;
color:Gray;
text-align:center;
margin: 20px 0 20px 40px;
}
.buttonClicked{float:left;
width:110px;
height:125px;
border:1px solid #000;
background-color:#FF6633;
font-family:Arial;
font-size:small;
color:#DDDDDD;
text-align:center;
margin: 20px 0 0;
}
.centrador {width: 264px;
margin: 0 auto;
}

[kurgari]

Antes que nada, gracias por la velocidad con la que me habéis contestado y disculpas por la mía.

He probado lo que me habéis dicho, he borrado la duplicidad del "text-align" sin buen resultado y tampoco ha funcionado el añadir un "centrador". Me he asegurado que las dos DIV's contenidas no superen el tamaño del subcontenedor...

Antes de proseguir quisiera hacerles una pregunta:

Lo que yo estoy diseñando no es, del todo, una web; sino una interfaz web para un programa desarrollado en ASP.net, entonces ¿Sigue siendo tan necesario el seguir el "estándar CSS" y no usar el "HTML + tablas" de toda la vida?

Gracias por todo, un saludo!

[Mikmoro]

¿Estás seguro de que "no ha funcionado" el centrador?

http://www.araudi.net/forosdelweb/centrador.html

[kurgari]

Bien... algo he conseguido... solo que ahora, en vez de estar de lado, uno me los pone en columna... :-O

[kurgari]

arreglado! un problema de tamaños!


muchísimas gracias!