Posicionar una imatge rodejada de text

09/07/04

Potser sigui una de les tècniques més bàsiques i senzilles. Només cal declarar un XHTML del tipus:


<img src="foto.png" alt="text alternatiu" />
<p>
   Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
   Vestibulum at purus sed erat lobortis suscipit. Cras
   facilisis viverra wisi. Class aptent taciti sociosqu...
</p>

Al CSS se li dóna la propietat float a la imatge per posicionar-la a una banda (esquerra o dreta) i es donen els marges pertinents a la imatge perquè el text no quedi enganxat.


img {
   float: left;
   margin: 0 10px 10px 0;
}

Comentaris

Comentat per faemino el 10/07/04

Genial, ja ho tinc fet
http://www.anedonia.net/dinero/
Comentat per are el 10/07/04

ha estat fàcil no? :)
Comentat per Informatica Publica el 10/11/04

Seria possible pasar el costat del float en funcio de l'atribut Align de la imatge?

Algo aixó com:

.img_float {
float: content:attr(align);
margin: 0px 0px 10px 10px;
}
Comentat per are el 11/11/04

El tema és que l'atribut "align" no s'ha d'emprar. És funció del CSS la disposició dels elements.
Comentat per are el 13/10/05

Per diferenciar diferents tipus de comportament s'ha de marcar amb una class o, si és molt especific, amb un id.
Comentat per Joan el 13/10/05

Sóc novell en això, però fent proves he vist que al codi que tu apuntes i passa una cosa que no entenc. Escric:
```
img {
   float: left;
   margin: 0 10px 10px 0;
   }
```
He probat aquest codi a:

Només una frase

Voldria que la frase quedés a la dreta de la foto, aliniada just a mitja alçada de la foto. Amb aquest codi, si modifico el margin es mou la foto i no el text. Bé, el text només es mou posant algun valor al margin-right (el segon en la shortcut property), cosa que no passa amb el bottom o el top. Si dono un valor al top, la imatge va cap avall... No ho entenc. Com centraries el text?
Comentat per are el 13/10/05

Certament una caixa flotant (el cas de la imatge) no està pensat per ser aliniat verticalment.
Un camí que pots agafar per fer-ho és:
img { vertical-align: middle; } p { display: inline; }

Has d'anar amb compte si fas això ja que el paràgraf només podrà tenir una línia o et sortirà malament.

Una alternativa, un pèl més complexe la pots trobar a l'artícle Centrat vertical.
Comentat per Joan el 14/10/05

Ara sí. Gràcies.
Comentat per Joan el 16/10/05

Quin codi proposes perquè hi hagi un peu de foto a la imatge? No acabo de trobar la solució.
Comentat per volldamm.net » Recull d’articles per aprendre XHTML i CSS el 16/03/06

[...] Posicionar una imatge rodejada de text [...]

a.css

Menú

Posicionar una imatge rodejada de text

Comentaris