posizionare al centro un img coi CSS

22-10-2004, 02.34.57

ragazzi sto cercando un attributo x i css che mi consenta di posizionare le immagini al centro della riga... qual'è?

Plz aiutatemi!

22-10-2004, 13.52.26

Grazie mille :) pensavo che funzionasse solo con il testo :eyes:

Originalmente inviato da Meifunado

Ah, un consiglio, mejo nn sbandierare la tua mail sul web

Uhm... hai ragione :)

22-10-2004, 15.00.40

io ho provato a fare una classe, in questo modo:

.img {
border: 4px double Silver;
text-align: center;
}

e, quindi, nel body ho fatto:

<img src="halo1.jpg" class="img" alt="Entra">

eppure il bordo me lo da, ma la posizione non me la da :()
devo fare x forza div?
non esiste un attributo pensato per posizionare al centro un elemento non testuale? (il che sarebbe strano, considerando che ho visto tanti siti con l'immagine al centro.

Inoltre, come si fa a non permettere di far comparire le icone in alto a sinistra dell'img che permettono di copiare, stampare ecc.?

22-10-2004, 16.20.51

grazie mille :)

(cmq per l'allineamento devo usare text-align, giusto?)

22-10-2004, 16.23.59

adesso che mi viene in mente, posso usare il box model per spaziare l'elemento dal resto della pagina (magari specificando i px da dx e sx)?

**heracleum** · 22-10-2004, 16.37.06

Guarda, le cose stanno così, dipende se l'attributo:
1) lo vuoi per forza affibiare all'immagine stessa
2) lo puoi anche impostare al suo contenitore (un div, ma anche un paragraph P, etc..)

nel caso 1), ovvero come stavi facendo finora, in css puoi utilizzare il float:
float: center;
che è esattamente il corrispettivo in CSS del vecchio html ALIGN=CENTER in una IMG.
Attenzione che potrebbe incasinare -come di consueto- eventuale contenuto sottostante soprattutto se si usa right e left come float (in questo caso usare subito dopo un <BR clear=all>).

nel caso 2)
dovrebbe funzionate il precedentemente suggerito
text-align:center
funziona ok ma va indicato nel contenitore e NON nell'immagine stessa, ok?

22-10-2004, 21.08.15

grazie mille!Ora vi dico

22-10-2004, 21.39.57

niente... non funzia.
Sentite, vi copio ciò che ho fatto...

Il primo file che vi carico è il css esterno stile.css che ho fatto tramite l'editor TopStyle Lite

--------------------------------------------------------------------------

body {
background: url(sfondo.JPG);
background-attachment: scroll;
}

.tes {
color: White;
font-size: medium;
font-weight: bolder;
}

.tit {
color: Purple;
font: bold;
font-size: xx-large;
font-weight: bolder;
text-align: center;
}

.stit {
color: white;
font-size: medium;
font-weight:bolder;
text-align: center;
}

.img {
border-width: medium;
border-color: Silver;
}
A:link, A:visited { text-decoration: none; color: White; }
A:hover { text-decoration: none; color: Black; }

--------------------------------------------------------------------------

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
<html>
<head>
<META HTTP-EQUIV="imagetoolbar" CONTENT="no">
<title>ITALIAN INFANTRY</title>
<link rel="stylesheet" type="text/css" href="stile.css">
</head>
<body><div text-align="center"><a href="index2.html"><img src="halo1.jpg" alt="Entra" class="img"></a></div>
<body>
<html>

--------------------------------------------------------------------------

Questo è la prima che ho provato, poi ho provato aggiungendo a .img in stile.css l'attributo
" float: center; "

e togliendo il div...
Ma niente (?_?)

**heracleum** · 23-10-2004, 01.42.41

Sì, in poche parole, quel che vuol dire Meifunado -e concordo- è che hai toppato a scrivere proprio qui (segnato in rosso, oltre vari errorucci in blu):
...
<body><div text-align="center"><a href="index2.html"><img src="halo1.jpg" alt="Entra" class="img"></a></div>
<body>
<html>

body e html devono essere CHIUSI con gli slash "/": </body></html>
(ma poco importa di solito i browser passano sopra questi refusi.

Invece tornando al topic, l'errore segnato in rosso è che hai confuso il text-align per un attributo HTML mentre devi usarlo in CSS, ovvero se vuoi usarlo nel div al volo senza definire una class apposita, invece di:
<div text-align="center">
usi lo style così:
<div style="text-align:center">

e vedi che funziona tutto

Per il float:center invece mi rimangio tutto perché ho sparato una boiata, float (che indica da che parte il testo dovrà adattarsi) può essere solo left e right, niente center (in effetti far passare il testo ai lati di un'immagine centrata non è cosa immaginabile), perciò rimuovi, cancella tutto :eyes:

23-10-2004, 12.28.49

ok funzionaaaa! Grazie mille ad entrambi, siete stati molto disponibili :)

23-10-2004, 14.31.16

Originalmente inviato da ItalianInfantry

io ho provato a fare una classe, in questo modo:

.img {
border: 4px double Silver;
text-align: center;
}

e, quindi, nel body ho fatto:

<img src="halo1.jpg" class="img" alt="Entra">

eppure il bordo me lo da, ma la posizione non me la da :()
devo fare x forza div?

Scusate. So che è fuori tema ma credo sia importante. Non riesci a centrare l'immagine con quel css semplicemente perche' img è un tag inline e non è block level come lo è div o p. essendo inline inizia e finisce con il contenuto. A differenza di un div che a prescindere del contenuto in tanto si prende tutta la riga fino alla fine e su tutta la riga è possibile centrare il testo (o nel tuo caso le immagini)

Ciao e scusate ancora

**heracleum** · 23-10-2004, 16.53.54

Sì diciamo, che non gli abbiamo detto il termine "inline" (che forse non risulta familiare) ma i concetti erano quelli :)
Comunque hai fatto bene a precisare in una forma più specifica.

Discussione: posizionare al centro un img coi CSS

LinkBack

Strumenti discussione

Display

posizionare al centro un img coi CSS

Regole di scrittura