Como centrar imagenes con diferentes dimensiones en un DIV

[isabelramirezmontoya]

Chicos buenas tardes, me pueden colaborar con esta duda.

Con el codigo que coloco abajo, logro intercambiar 5 imagenes en un DIV (funciona perfecto), pero tengo un problema, como logro centrar (vertical / horizontal) las imagenes en el DIV cuando cada imagen tiene dimensiones diferentes.

Codigo PHP

Código HTML:

<?php
 
$imagen1 = $codigo_imagenes1;
$imagen2 = $codigo_imagenes2;
$imagen3 = $codigo_imagenes3;
$imagen4 = $codigo_imagenes4;
$imagen5 = $codigo_imagenes5;
 
 
echo '<div>';
echo '<img id="imagen_central" src="http://controles.com/fotos/'.$imagen1.'">';
echo '</div>';
 
echo '<center>';
 
 
echo '<img src="http://controles.com/fotos/'.$imagen1.'" width="15" height="15" onclick="ver_imagen(this.src)">';
echo ' ';
echo '<img src="http://controles.com/fotos/'.$imagen2.'" width="15" height="15" onclick="ver_imagen(this.src)">';
echo ' ';
echo '<img src="http://controles.com/fotos/'.$imagen3.'" width="15" height="15" onclick="ver_imagen(this.src)">';
echo ' ';
echo '<img src="http://controles.com/fotos/'.$imagen4.'" width="15" height="15" onclick="ver_imagen(this.src)">';
echo ' ';
echo '<img src="http://controles.com/fotos/'.$imagen5.'" width="15" height="15" onclick="ver_imagen(this.src)">';
 
echo '</center>';
 
?>
 

Codigo JAVASCRIPT

Código HTML:

function ver_imagen(src)
{
document.getElementById("imagen_central").src = src;
}
 

Gracias

[xSkArx]

La etiqueta div tiene un atributo que se llama align y como valor le pones center

Código HTML:

<div align="center">loquesea</div>
 

[WorseMzg]

Iniciado por xSkArx

La etiqueta div tiene un atributo que se llama align y como valor le pones center

Código HTML:

<div align="center">loquesea</div>
 

creo que con un Style="margin:0 auto;"deviese funcionar

[jonni09lo]

Iniciado por WorseMzg

creo que con un Style="margin:0 auto;"deviese funcionar

Solo si los elementos tienen display block o display inline-block y si estos tienen un width fijo. Por defecto img es un elemento de línea (display inline)

@xSkArx creo que align ya no se usa actualmente (html5) solo con colocar

Código PHP:

<div id="imagenes">
    <!-- imagenes -->
</div>
 

Código CSS:

#imagenes{
    text-align:center;
}
 

Debería bastar

Saludos

[xSkArx]

Iniciado por jonni09lo

Solo si los elementos tienen display block o display inline-block y si estos tienen un width fijo. Por defecto img es un elemento de línea (display inline)

@xSkArx creo que align ya no se usa actualmente (html5) solo con colocar

Código PHP:

<div id="imagenes">
    <!-- imagenes -->
</div>
 

Código CSS:

#imagenes{
    text-align:center;
}
 

Debería bastar

Saludos

Como diseñador mejor sigo trabajando en lo que estoy, aunque si lo va a usar en otro lado, mejor que lo pase como clase y no ID

Código HTML:

<div id="uno" class="imagenes">loquesea</div>
<div id="dos" class="imagenes">otracisa</div>
 

Código CSS:

.imagenes{
text-align:center;
}