centrar imagenes

porque las imagenes YA ESTAN EN UN P !!! :) (no pueden estar fuera de un p/div etc). Por tanto solo tienes que decirle que las imagenes de los p sean bloques:

p img {display: block; margin-left: 50px}

O bien, si solo quieres que un tipo de imagenes actuen como bloque y se centren, entonces añades una clase a ese tipo de imagen, y haces:

.clase {display: block; margin-left: 50px}

pero eso no explica porque no puedo usar text-align center, .....

yo puedo tener un texto dentro de un p, y cerrarlo, despues hago otra p con imagenes y las centro con text-align:center.

Acabo de probar y si funciona, pero no lo de margin-left.........está en porcentaje, así que se complica para centrarlo.

No se si no entendi bien la pregunta, o la respuesta xD...

helenp: Supongo que cuando las metes dentro de un párrafo, lo haras de esta forma:

<code>&lt;p&gt;Éste es un texto que va antes de la imagen, y a continuación, tachaaaannnn!!!!&lt;/p&gt;&lt;!-- cerramos el párrafo --&gt;

&lt;p class="centrado"&gt;&lt;img src="./imagenes/imagen.png" alt="texto alternativo" title="titulo de la imagen" /&gt;&lt;/p&gt;

&lt;p&gt;A que os ha gustado, eh?&lt;/p&gt;</code>

Si es asi, yo creo que esta bien... ya que cuando meddle dijo <em>porque las imagenes YA ESTAN EN UN P !!!</em>, supongo que se referiria a que lo que no puedes hacer es anidar un párrafo dentro de otro, no?. Sin embargo, haciendolo como dice, te ahorras lineas de codigo (unas cuantas) ya que tu vas escribindo normalmente, y cuando quieras que una imagen quede centrada, simplemente le aplicas la clase, y no tendrias que cerrar el parrafo en el que estas, abrir uno, meter la imagen, cerrarlo y abrir otro para seguir donde lo habiamos dejado... ademas de que semanticamente no es correcto...

claro, en lugar de tener que cerrar p, abrir p centrado, meter imagen, cerrar p y volver a abrir p, como el ejemplo que comentas, lo mejor seria hacer:

<code>
p img {display: block; margin:auto}
...
&lt;p&gt;Éste es un texto que va antes de la imagen, y a continuación, tachaaaannnn!!!!
&lt;img src="./imagenes/imagen.png" alt="texto alternativo" title="titulo de la imagen" /&gt;
A que os ha gustado, eh?&lt;/p&gt;</code>

o bien
<code>
.centrada {display: block; margin:auto}
...
&lt;p&gt;Éste es un texto que va antes de la imagen, y a continuación, tachaaaannnn!!!!
&lt;img class="centrada" src="./imagenes/imagen.png" alt="texto alternativo" title="titulo de la imagen" /&gt;
A que os ha gustado, eh?&lt;/p&gt;</code>

Pues gracias a los dos,
pero esto no funciona: p img {display: block; margin:auto}

así que me quedo con mi text-align:center

Esto sí que funciona: p img {text-align: center}

&lt;p&gt;Éste es un texto que va antes de la imagen, y a continuación, tachaaaannnn!!!!
&lt;img src="./imagenes/imagen.png" alt="texto alternativo" title="titulo de la imagen" /
A que os ha gustado, eh?&lt;/p&gt;

Aunque para que quede bien hace falta mas p......... pa que cambie de linea, pero menos codigo.

&lt;p&gt;Éste es un texto que va antes de la imagen, y a continuación, tachaaaannnn!!!! &lt;/p&gt;
&lt;p&gt;&lt;img src="./imagenes/imagen.png" alt="texto alternativo" title="titulo de la imagen" /
&lt;p&gt;A que os ha gustado, eh?&lt;/p&gt;

¿no será porque el margin:auto no marcha en IE?

cbp

¿no será porque el margin:auto no marcha en IE?

ni idea, pero 99% de mis visitantes usan IE, así que......

existe un js para arreglar ese problema, lo puedes pillar aquí (link cortesía de meddle), espero que te sirva :)

cbp

existe un js para arreglar ese problema, lo puedes pillar aquí (link cortesía de meddle), espero que te sirva :)

pero porque no se puede usar text-align:center??????si funciona

ah, eso ya no lo sé, tendrás que preguntar a los teóricos del foro ;)

yo sólo puedo ofrecerte soluciones, no respuestas :P

en w3schools, aparece en syntax.............

no, en serio, no tengo muy claro por qué no puedes usarlo, hace poco que me he metido en la maquetación con css y no controlo mucho, lo que pasa es que he visto que tenías un problema y he pensado que podría serte de utilidad el Margin Fix ese

deberás consultar a los gurús :)

no digo que no puedas usarlo, solo digo que al hacerlo <em>tienes que</em> usar 3 parrafos en lugar de uno, y <em>semanticamente</em> no es correcto porque rompes el flujo y sentido del parrafo para algo que es <em>solamente presentacional</em>.

Querría probar a ver si era verdad que solo tendría un parrafo, ya que las imagenes las quiero en una línea nueva.
No se si es mi pc o si el javascript hay que editarlo, no funciona el auto, (lo meti en el .css no en pagina como decian), y no me termina de cargar la pagina, se queda congelado.
De todas formas hay que pensar en los 8kb que mide el java, añadiendolos a mi otra java que mide 30.

Viva la semantica!!! jeje... esto temas polémicos son los realmente interesantes:

<ul>Por un lado alguien (helenp) que se empeña, con toda la razón del mundo, en usar text-align: center; para alinear imagenes,

Y por otro, tres personajes que intentamos que comprenda que eso no es semánticamente correcto</ul>

En fin, que yo de todas formas no estoy muy de acuerdo en solucionar (forzar) algo para que sea semanticamente correcto, si para ello tengo que usar tegnologías tan <em>poco</em> accesibles como JS. Creo que hay formas (supongo que las habrá, espero que las hayaaa...) para hacerlo todo con CSS, y cuando las encuentre, me las guardare y no las compartireEeEe..! jeje, es coña.

De todas formas, (todavía) no se han llevado preso a nadie por hacer Documentos de HiperTexto que no sean semánticamente correctos... ;)

solo una cosilla, lo que no es semanticamente correcto es el mal uso de los &lt;p&gt; que alguien defendia por aqui, el hecho de centrarlas se hace desde css y creo que no afecta a la semantica del documento porque no hay que cambiar nada en el codigo xhtml para eso, solo afecta la presentacion ;)
(tenia q decir algo en este tema :p)

no se si me vais a matar, o si es correctamente semantico pero vamos yo cuando quiero alinear una imagen a izq o dcha (me imagino que al centro tb) pongo esto <code>&lt;img src="img/fondo.gif" align="right"&gt; </code> y me va sin problema ninguno.

HARTUM

no se si me vais a matar, o si es correctamente semantico pero vamos yo cuando quiero alinear una imagen a izq o dcha (me imagino que al centro tb) pongo esto <code>&lt;img src="img/fondo.gif" align="right"&gt; </code> y me va sin problema ninguno.

Pues, alignar a derecha no tiene problemas, es más se hace incluso mejor con .css, puedes tener un bloque de texto al lado de la imagen, para lo cual en html normal tendría que usar tablas.
Haciendole un estilo floatright en tu hoja .css, y lo aplicas a las imagenes que quieres a la derecha con o sin texto.

a ver si primero probais las cosas, que os veo mu perrillos, eh? ;)

<code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"&gt;

&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
&lt;head&gt;

&lt;meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /&gt;

&lt;title&gt;Test Template&lt;/title&gt;

&lt;style type="text/css"&gt;
p {width:200px;background: gray}
p img {display:block; margin:auto;}

&lt;/style&gt;

&lt;/head&gt;
&lt;body&gt;

&lt;p&gt;Esto es texto y en la siguiente "linea" va una imagen, ahora: &lt;img src="meddle.gif" width="30" height="30" /&gt;Pero esto ya deberia ser otra "linea".&lt;/p&gt;

&lt;/body&gt;
&lt;/html&gt;</code>
Esto funciona OK en Moz/IE6/OP7, pero asumo que no centra la imagen en IE5.

Si en lugar de margin:auto ponemos text-align:center; solo va en IE6 (y asumo que entonces si que centra en IE5, no lo tengo).

Solucion: poner los dos:

p img {display:block; margin:auto; text-align:center;}

No lo he probado, pero ya me direis si vuestro IE5 se queja o lo hace bien.

Meddle,
Desde luego que probé,
inserté:
p img {display:block; margin:auto;}

y no funcionaba,
pero ahora al copiar tu codigo en una pagina nueva si funciona (en IE6)

es porque no terminé la imagen con: /&gt;
sino con: &gt;

Esa terminación es xhtml.

Comprobado, solo funciona margin:auto si lo tiene en xhtml.

Es que yo aun lo tengo en html, mas adelante voy a cambiar a xhtml, pero querría estudiarlo bien primero.

Pues, llegó la hora de estudiarlo, voy a abrir otro post, ya que uno me aconsejó esperar con xhtml de momento

yo reconozco que soy mu perro, como para negarlo.........