[CSS] Immagine centrata tra testo

13-09-2009, 14.16.06

Ciao a tutti, ho un problema da porvi. Allora quando io metto l'aling=left, l'immagine si porta a sinistra del testo; se metto right a destra. Invece...come faccio a metterlo al centro? Ho fatto un esempio con PhotoShop di quello che vorrei fare:

(Non badate al testo! XD), spero si possa fare. Grazie mille. Ciao Davide! ^___^

13-09-2009, 14.21.04

prova mettendo center. io non lo so ma potrebbe funzionare

13-09-2009, 14.21.44

Il tuo consiglio è inutile, aspetto qualcuno più esperto. Grazie comunque! ^___^

13-09-2009, 14.23.04

va bhe tanto io ho solo 11 anni (e un sito+un blog+un forum) quindi fors esi potrebbe essere inutile ^^

13-09-2009, 14.40.04

Se imposti come sfondo l'immagine puoi fare:

Codice:

background: url(immagine.estensione) no-repeat top center;

13-09-2009, 14.44.15

Usando le proprietà standard credo sia impossibile, poresti provare a smantteare con position e con il float.

**andreafallico** · 13-09-2009, 15.45.35

Con il css non lo so se si può fare, però con table riproduce lo stesso effetto.
Ecco come:

Codice:

<table border="0" align="center">
<tr>
<td align="center">testo</td>
<td align="center"><img src="..." border="0" /></td>
<td align="center">testo</td>
</tr>
<tr>
<td colspan="3">testo</td>
</tr>
</table>

13-09-2009, 15.49.36

Anche con il css è possibile "simulare" quell'effetto che proponi tu andre, il probleme e che, se non ho capito male.

Ciò che è a destra dell'imaggine, e la continuazione del testo contenuto alla sua sinistra.

@sIM: A mio parere l'effetto che cerchi è assassino per gli occhi!

13-09-2009, 15.59.11

Esatto! XD Sapete consigliarmi qualche soluzione fattibile per questa cosa? XD
Grazie mille.

13-09-2009, 16.01.10

Originalmente inviato da biccheddu

Usando le proprietà standard credo sia impossibile, poresti provare a smantteare con position e con il float.

13-09-2009, 16.12.43

Appunto, stavo chiedendo a voi se ne conoscete qualcuna! XD

**andreafallico** · 13-09-2009, 16.12.47

Non l'avevo visto che il testo di sinistra è la continuazione di quello di destra

13-09-2009, 16.13.58

Ma di cosa Davide?! Usa il position: absolute; e smanetta con questi valori.

13-09-2009, 16.43.32

Niente da fare. Io non ci riesco...magari provate voi e vi riesce! XD
Perché l'immagine viene messa sopra il testo, e quindi quello che c'è dietro non si legge! é__è

13-09-2009, 16.46.15

Hai provato display: block; ?

13-09-2009, 17.45.03

Mmm...prova tu e vedi che risultato ti esce:

Codice PHP:


<style>
#content { font-family: Calibri; font-size: 13px; width: 600px; }
#content img { position: relative; top: 70%; left: 50%; }
</style>

<div id="content">
<img src="http://i25.tinypic.com/2rfx4lk.png" alt="" />
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc,
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc,
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc,
</div>

**luca1962** · 13-09-2009, 17.48.44

Io ho trovato questo:

http://www.enricomilano.it/sintassi....to-un-immagine

http://canoro.altervista.org/

se ti puo' essere utile!

13-09-2009, 18.04.23

Grazie mille, mi è stato molto utile...solo che quel codice centra solo una riga, non tutte! =D

**acsocmel** · 14-09-2009, 00.38.26

Originalmente inviato da sIM

aling=left, l'immagine si porta a sinistra del testo; se metto right a destra. Invece...come faccio a metterlo al centro?

non si può e che io sappia non è mai stato preso in considerazione da nessuno prima
wow sarebbe un colpo mondiale se troviamo una soluzione

Discussione: [CSS] Immagine centrata tra testo

LinkBack

Strumenti discussione

Display

[CSS] Immagine centrata tra testo

Regole di scrittura