center dans css

[Mincoin]

Bonjour,

J'avais l'habitude d'afficher mes images ainsi :

et cela fonctionne sous le header, et à droite du menu gauche du site que je prépare :

<CENTER><TABLE><TR><TD>

<IMG src="../photos/lecrotoy/cretoy5.jpg" border="0" alt="Photo cabines de plage">

</TD></TR></TABLE></CENTER>

Mais il vaut mieux mettre "center" dans la feuille de css.

Cette écriture ci-dessous ne fonctionne pas l'image se retrouve en bas de page, sous le menu gauche.

table.tabcentre { margin-left: auto; margin-right: auto; }

<table class="tabcentre" >

<TR><TD>

<IMG src="../photos/lecrotoy/cretoy5.jpg" border="0" alt="Photo cabines de plage">

</TD></TR></table>

Sympa de m'apporter une aide pour bien aligner cette photo les autres suivront le même moule

A bientôt.

Régis

[Fight]

Il faut ajouter

text-align:center;

Mais c'est encore mieux dans un div que dans un tableau ;-)

[Dan]

Salut Régis,

Les { margin-left: auto; margin-right: auto; } ne fonctionnent pas sous IE... et c'est un bug connu.

La meilleure manière de contourner cela est de mettre un <div> avec un "text-align:center} pour englober ton tableau, si tu tiens vraiment au tableau.

Dans ce cas, il faudra définir text-align:left pour la table pour éviter d'avoir tout le contenu centré.

Mais les tableaux devraient idéalement être réservés aux données "tabulaires" comme des colonnes de chiffres/texte et non pour la présentation graphique.

Dan

[Mincoin]

Merci Fight et Dan,

Mais comment se passer de tableau pour afficher et centrer une image ...

J'espère que ma question n'est pas trop basique mais pour l'instant je bloque !

a bientôt

Régis

[Raphael]

Mais comment se passer de tableau pour afficher et centrer une image ... 

CSS :
.conteneur {
text-align: center;
}

img {
margin-left: auto;
margin-right: auto;
}

HTML :
<div class="conteneur">
<img src=" alt="" />
</div>

Plus amples explications : http://www.alsacreations.com/articles/centrer/

[Mincoin]

Merci,

Au fait, je ne vois pas comment img est relié à la feuille de style avec cette écriture.

img {

margin-left: auto;

margin-right: auto;

}

html

<img src=" alt="" />

et pourquoi la phrase html se termine par /> et non pas par >

Merci pour vos réponses.

Régis

[Neoboot]

Pour l'attribut /> c'est dans le Xhtml etant donner que la balise <img> na pas de balise de fin genre </img> en Xhtml tu remplace </img> ( qui n'existe pas ) par <img blablabla />

Le reste je sais pas

[Monique]

Bonjour Régis,

Des attributs de feuilles de style peuvent se "transmettre" de plusieurs façons.

Avec un élément

img {
margin-left: auto;
margin-right: auto;
}

et dans le code
<img src="imgage1.gif" width="145" height="120" alt="image">

toutes les images de tes pages auront ces caractéristiques.

Avec class

.imgmilieu {
	vertical-align : middle;
	margin-left : 1em;
	margin-right : 1em;
}

et dans le code 
<img src="imgage1.gif" width="145" height="120" alt="image" class="imgmilieu">

toutes les images, sur toutes les pages, auxquelles tu attribueras cette classe auront ces caractéristiques.

Avec id

#imglogo {
	position: absolute;
	top: 35px;
	left: 30px;
	z-index: 1;
}

et dans le code
<img src="logo.gif" width="50" height="30" alt="" id="imglogo">

une seule image par page peut se voir attribuer ces caractéristiques.

Ces exemples sont applicables de la même manière à tous les éléments d'une page.

Je n'ai pas ajouté le / de fermeture : en HTML il ne faut pas l'utiliser, tes pages ne seraient pas validées. C'est à utiliser (et obligatoire) seulement en XHTML.

[Guest PierreThierry]

tu remplace </img> ( qui n'existe pas ) par <img blablabla />

En fait, si, ça existe. En XML, donc en XHTML également, les lignes suivantes sont parfaitement équivalentes:

<n-importe-quelle-balise des-attributs='en veux-tu, en voilà'/>
<n-importe-quelle-balise des-attributs='en veux-tu, en voilà'></n-importe-quelle-balise>

Évidemment, la première version semble plus lisible et plus pratique. Et puis un navigateur ne comprenant pas XML refusera probablement d'entendre parler d'une balise fermante </img>, alors que la plupart supportent sans sourciller <img/>.

Astuce : laissez un espace avant le /, pour éviter des soucis.