Aller au contenu


Photo
- - - - -

Comment centrer une image?


  • Veuillez vous connecter pour répondre
9 réponses à ce sujet

#1 juju1832

juju1832
  • Membre
  • 27 messages

  • Inscrit(e) : 11-novembre 05

Posté 28 novembre 2005 - 17:50

Salut
J'aimerais centrer une image mais je ne sais pas comment faire.
Pour centrer un texte c'est : text-align: center

Mais pour une image?
merci

<modérateur: déplacé en (x)HTML et CSS>

Modifié par Loupilo, 28 novembre 2005 - 22:12.

  • 0

#2 Urban

Urban
  • Membre
  • 214 messages

  • Inscrit(e) : 08-novembre 05

Posté 28 novembre 2005 - 18:00

Voici une solution :

css:

img.centered {
    display: block;
    margin-left: auto;
    margin-right: auto }

html:

<img class="centered" src="..." alt="...">

  • 0

#3 yuston

yuston
  • Membre+
  • 654 messages

  • Inscrit(e) : 07-octobre 04
  • Genre:Homme
  • Localisation:Lausanne

Posté 28 novembre 2005 - 19:16

en principe, si tu mets dans un div que tu as préalablement défini la css avec un text-align:center; ca devrait marcher.... non?
  • 0
Andersen Lau - Me retrouver sur Twitter
Pour les jeunes qui n'ont pas encore réussi le permis de conduire, faites une petite accélération (prioritairement en voiture!) sur Le-Permis.ch. A fond les pédales!

#4 Carlota

Carlota
  • Membre
  • 40 messages

  • Inscrit(e) : 01-juin 05

Posté 29 novembre 2005 - 12:06

Yuston je confirme. Si tu mets ton image dans un div et que tu définis une classe avec text-align: center alors l'image sera centrée.
  • 0

#5 Remi

Remi
  • Hubmaster
  • 932 messages

  • Inscrit(e) : 28-juin 04
  • Genre:Homme
  • Société:Studio Amarante

Posté 29 novembre 2005 - 15:12

Non, non...
Il y a plein de cas où cela ne marchera pas. :wacko:

Mais à la base le principe est simple : déjà, pour que le navigateur puisse centrer, il faut que la largeur du contenant soit connue de lui. Allez centrer une image dans un 'div' dont vous ne connaissez pas la taille, pas facile...

Et deuzio, il faut qu'il connaisse la taille de l'élément à centrer. Et là, le "display:" (inline / block) de l'image peut interagir...
  • 0
Un lieu magique près d'Aix-en-Provence Château Grand Boise : location de prestige, domaine viticole, face à la Montagne Sainte Victoire. Et un beau site de Calvados et cidre...

#6 scarface13000

scarface13000
  • Membre
  • 21 messages

  • Inscrit(e) : 27-novembre 05

Posté 29 novembre 2005 - 20:22

Pour ne pas te fatiguer la tache avec les css meme si c'est preferebale utilise:


<center> ton image </center>
  • 0

#7 Dudu

Dudu
  • Admin
  • 3 881 messages

  • Inscrit(e) : 09-avril 05

Posté 29 novembre 2005 - 20:50

Salut,

Pour ne pas te fatiguer la tache avec les css meme si c'est preferebale utilise:
<center> ton image </center>

<{POST_SNAPBACK}>

Il serait quand même sympa d'éviter les conseils vérolés comme celui-ci :(

D'une part, la balise <center> n'a pas forcément le même comportement sur tous les navigateurs, d'autre part elle est dépréciée depuis des années par le w3c du fait qu'il s'agisse d'une balise de présentation alors que l'HTML est un langage de marquage sémantique de contenu.
  • 0

#8 sh4dox

sh4dox
  • Email Invalide
  • 1 messages

  • Inscrit(e) : 10-juin 06

Posté 10 juin 2006 - 10:07

Bonjour à tous chez ami collègue !

J'ai essayé cette petite technique qui sur le coup m'a parru tres ingénieuse ! malheureusement apres réflexion, j'ai observé une incompatibilité avec notre cher IE...
Vous allez me dire : "normal est toujours là pour nous faire chier !"
Que ferait on sans IE !

Enfin bref :

Mon CSS :

h1
{   
margin: 4px 0 0 10px; 
color: #7d7d7d;	
font-size: 0.9em;
}
a  img
{
border: none;
}
img.center
{
display: block;
margin-left: auto;
margin-right: auto 
}
#gauche
{
float: left;
width: 197px;
}
.g_titre
{
position: absolute;
float: left;
width: 197px;
height: 22px;
background-image: url("images/g_titre.png");
background-repeat: no-repeat;
}
#g_menu {
list-style-image: url("images/fleche.gif");
margin: 0;
padding: 0;
}
#g_menu ul {
margin-top: 5px;
}
#g_menu li {
margin-bottom: 10px;
margin-left: 28px;
line-height: 5px;
}
#g_menu a {
margin: 0 2px;
color: #282828;
font-size: 0.8em;
text-decoration: none;
}
#g_menu a:hover {
text-decoration: none;
color: #4472b2;
font-size: 0.9em;
}

Mon HTML :

<ul id='g_menu'>
<div class="g_titre">
<h1>Informations diverses</h1>
</div><br /><br />
<li><a href='#'>lien 1</a></li>
<li><a href='#'>lien 1</a></li>
</ul>
<div>
<a href="#">
<img class="center" src="images/ban.png" alt='image' title='image' /></a>
<br />
</div>

Ce code marche à la perfection sous FIREFOX et le cauchemard commence sous ie !
La solution temporaire que j'ai utilisé c'est de placer manuellement les images avec une margin-left: 5px; mais sa m'amuse de me compliquer la vie :P

Merci de vos illuminations...

#9 Dudu

Dudu
  • Admin
  • 3 881 messages

  • Inscrit(e) : 09-avril 05

Posté 11 juin 2006 - 20:51

Salut

Tente de modifier ta class .center dans ton fichier CSS comme suit
img.center
{
display: block;
margin-left: auto;
margin-right: auto;
text-align: center;
}

Je n'ai pas IE pour vérifier, mais il me semble qu'il y a un bug sur l'interprétation des centrages par marge, et que la solution était de rajouter un text-align: center
  • 0

#10 shaza

shaza
  • Membre
  • 3 messages

  • Inscrit(e) : 21-janvier 05

Posté 18 mars 2007 - 16:18

avec beaucoup de retard...
img.centre
{
display:block;
clear:both;
margin-left:auto;
margin-right:auto;
		}

fonctionne avec ie6, opera et firefox, netscape, et k-meleon

Modifié par shaza, 18 mars 2007 - 16:18.

  • 0




0 utilisateur(s) lisant ce sujet

0 membre(s), 0 invité(s), 0 utilisateur anonyme

experts referencement   Seo .fr