[Programación]css centrar imagen.

Rafael Bidegain r.bidegain en gmail.com
Mie Jul 4 09:06:40 ART 2012


El día 2 de julio de 2012 12:59, Federico Luna
<federico.luna en gmail.com> escribió:
> buenas,
>
> no soy un experto en css, pero así me funciono. Igualemente tal vez
> exista una mejor manera.
..

Gracias Federico, tu ayuda me fué muy útil
a la solución que me pasaste le encontré un problema, el
position:fixed deja fija la imagen y cuando hago scroll queda siempre
en el mismo lugar.
lo solucioné cambiando fixed por absolute.

después de eso solo me quedaba centrar verticalmente la segunda imagen
respecto a la primera, eso lo solucioné con paciencia y saliv
^H^H^H^H^H javascript

pego toda la solución por si le sirve a alguien o por a alguien se le
ocurre algo mas eficiente. (yo voy a tener que cambiar los tamaños de
las imagenes según la resolucion de la pantalla)

<html>
<head>
  <style type="text/css">
  #autor {
	margin-left: auto;
	margin-right: auto;
  border:3px;
  border-style:solid;
  border-color:#FF0000;
  }

  #socrates {
  position:absolute;
  margin-top:30px;
  }
</style>
<script type="text/javascript">
function cargar() {
  var cadena;
  var alto1, alto2;
  //alert(screen.width);

  document.getElementById('autor').style.height="350px";
  document.getElementById('socrates').style.height="200px";

  alto1=document.getElementById('autor').style.height.replace("px","");
  alto2=document.getElementById('socrates').style.height.replace("px","");
  cadena = ((parseInt(alto1) - parseInt(alto2)) / 2 ).toString() + "px";

  document.getElementById('socrates').style.marginTop=cadena;
  //alert(document.getElementById('socrates').style.marginTop);
}
</script>
</head>
<body onLoad="cargar();">
<div style="text-align:center; border:3px; border-style:solid;
border-color:#0000FF;">

<img id="autor" alt="Jacques-Louis David"
src="http://upload.wikimedia.org/wikipedia/commons/thumb/c/c6/David_Self_Portrait.jpg/250px-David_Self_Portrait.jpg">

<img id="socrates" alt="muerte de Socrates"
src="http://upload.wikimedia.org/wikipedia/commons/9/9b/Socrates-1-.jpg">
</div>

</body>
</html>

-- 
Rafael Bidegain

Ya que los cuerdos no hablan, hablará el loco.
(The Fool, Padraic Pearse)

# yo quiero educación libre. ¡YA!


Más información sobre la lista de distribución Programacion