Desarrollo y diseño

centrar foto en web

S
straN #1 Jul '10

hola buenas,

cual es el codigo para centrar una foto en la web ?

tengo puesto <center></center>..

pero quiero que me la centre tambien de arriba a abajo...

alguna solucion ?

eXtreM3
eXtreM3 #2 Jul '10

Nunca supe hacer la mierda de centrar algo en un div verticalmente xD

Yo te voy a dar una solución muy perry, pero que funciona:

  1. Haz un div que sea todo el ancho y todo el largo de la web (el 100%)
  2. Dentro de ese div haz una tabla, que también sea 100% width y 100% height
  3. Cuando hagas el <td> ponle <td valign="middle"> aqui tu foto </td>

Seguro que alguno de aquí me mata por hacer esto, pero como solución temporal te sirve jajaja, saludos! ;)

l31m
l31m #3 Jul '10

CSS:
p {
margin: 1em;

}

#mydiv {

position:absolute;

top: 50%;

left: 50%;

width:30em;

height:18em;

margin-top: -9em; /set to a negative number 1/2 of your height/

margin-left: -15em; /set to a negative number 1/2 of your width/

border: 1px solid #ccc;

background-color: #f3f3f3;
}

HTML:
<body>

<div id="mydiv">

<p>Contenido del div</p>

</div>

</body>

ceeps
ceeps #4 Jul '10 Abe Sapien

Mucho mejor hacerlo con el css de #3 que con la tablas de #2.

NeB1
NeB1 #5 Jul '10

#3 tiene la solución, yo por mi parte a esperar que en el próximo cSS se les ocurrá una forma de lidiar con esto, porque no hay una solución práctica, son parches. Y además esta solución no te sirve cuando el alto del div es variable porque por ejemplo sea un slideshow o algo...

B
[Borrado] #6 Jul '10

¿Y con margin: 0 auto no se podía centrar?

eXtreM3
eXtreM3 #7 Jul '10

#6 el margin centra horizontalmente.

Y la solución de #3 no funciona para todos los casos prácticos, como ha comentado Neb1.

Solución de tablas > all :D

S
straN #8 Jul '10

al final me dijeron anoche como hacerlo

lo hize asi:

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>web name</title>
<table width="100%" height="100%"><tr valign="middle">
<td align="center"><img src="mipaginaweb" width="600" height="600"></td>
</tr></table>
<link href="blog/favicon.ico" rel="shortcut icon" />
</head>

ahora bien, para no abrir un tema nuevo, para que se me vea el favicon en toda la web, donde tengo que ponerlo ??

porque mi web es "nombredelaweb.es/blog"

y claro, ahora solo se me ve en "nombredelaweb.es y no en "/blog"

gracias

eXtreM3
eXtreM3 #9 Jul '10

Ponle de nombre favicon.ico y lo pones en la carpeta raíz, donde esté el index. Por defecto lo cargará en todos los subdirectorios.

Por cierto, dentro del head no pongas código html hombre de dios, para eso está el body ;)

Edit (como curiosidad) : mi profesora de informática de bachiller decía que lo que pusieras en el <head> no se veía xDDD me acabo de acordar.

S
straN #10 Jul '10

nada, no entiendo, aun poniendolo en la carpeta raiz, solo me salen en "miweb.es" y yo quiero que tambien me salga en "miweb.es/blog" pero nada :S

Usuarios habituales

Tags