High-Tech Santé Médecine Droit-Finances

Grippe A

Que dois-je faire ?

Rechercher : dans
Par :

Comment centrer une image en css

Dernière réponse le 30 sep 2009 à 01:43:37 Christopher, le 16 avr 2006 à 11:06:12 
 Signaler ce message aux modérateurs

Bonjour a tous,

Je suis en train de créer mon site, et, en ce moment je créer le disign, de taille fixe. J'ai mit une image avec le nom de mon site tout en haut de la page, mais celle ci se trouve a gauche, et je voudrai la centrer. Comment faire ??


Merci d'avance


Christopher

Meilleures réponses pour « Comment centrer une image en css » dans :
Les CSS pour présenter vos images VoirPour présenter agréablement vos images, vous pouvez intégrer quelques codes supplémentaires dans votre CSS et vous en servir à bon escient. Elles sont bien sur modulables en fonction de la charte graphique de votre site. Utilisation Mettez les codes...
Javascript - Librairies d'effets pour vos images VoirAu gré de vos explorations du web, vous avez vu de superbes effets de présentation des images. Et ça vous plairaît bien de pouvoir proposer les mêmes à vos visiteurs. Voici quelques solutions en Javascript couplées à des CSS. Elles sont plus...
Réajuster les dimensions d'une image, en pixels VoirOn peut avoir besoin de réajuster une image, selon un nombre précis de pixels. Cette astuce vous apprendra à utiliser le logiciel Paint.NET pour réaliser cette manipulation. Après l'installation du logiciel, et après avoir ouvert celui-ci,...
Les feuilles de style VoirPropriétés de polices Propriété Valeur Description font-family Police précise (Arial, Times, Verdana) Famille (serif, sans-serif, fantasy, monospace, cursive) Définit un ou plusieurs nom de polices ou de familles de...
Posez votre question Répondre

1

king, le 16 avr 2006 à 15:42:22

Normalement, faut la positionner, donc depuis la marge gauche mettre la moitié du Div moins la moitié de l'image (vu que c'est le côté gauche qui est pris en considération).

   
Répondre à king

2

gintoxic, le 4 aoû 2007 à 22:16:54

J'ai le meme souci mais je suis novice en css et html...donc je n'ai rien compris a l'explication. moi c'est un lecteur que je voudrais center cela marche-t-il de la meme maniere ?

   
Répondre à gintoxic

3

king, le 4 aoû 2007 à 22:48:19
  • +1

Ben tu renseignes la largeur de l'image, la position écran moins la moitié de l'image (vu que c'est le coin gauche qui est le référent)

Ce qui donne:
width: 400px; -------> largeur de l'image ou div
left: 50%; -------> position écran
margin-left: -200px; ----> reculer de la moitié :-)

ou tu mets en "auto" (gaffe à la compréhension des navigateurs):

margin-left: auto;
margin-right: auto;
width: ...; ----> largeur obligatoire pour être centré


Tu n'indiques pas les " -----> blabla" évidemment sinon tu mets des /*---->blabla*/ pour commentaires

   
Répondre à king

14

 BoringBugz, le 30 sep 2009 à 01:43:37

Très pertinant, merci bcp xD

   
Répondre à BoringBugz

4

daruff, le 4 aoû 2007 à 23:00:26

Selectionne le tableau et clique sur centre dans la barre des propriétés si tu utilise dreamweaver

   
Répondre à daruff

5

roxalka, le 26 avr 2008 à 11:59:35

J'ai un problème d'images : Comment faire pour que toutes les images de mon site aient les memes dimensions. On me dit qu'il existe un logiciel gratuit...?

   
Répondre à roxalka

6

serval92, le 2 mai 2008 à 15:03:41

Il existe le logiciel gratuit Fastone resizer à cette adresse : http://www.faststone.org/DN/FSResizerSetup25.exe

   
Répondre à serval92

7

Mää, le 27 jun 2008 à 11:14:12
  • +3

Il est nul ton code avec left 50% sa marche pas bien du tout

faut faire un text-align: center;*

dans un <div> pour centrer

   
Répondre à Mää

8

zinkweb, le 11 aoû 2008 à 13:17:41
  • +24

Vos astuces pour centrer une image sont contraignantes et vous êtes allés les chercher loin on dirait ...
Il y a plusieurs cas ou le problème se résoud de façon casi-identique.
Dans le cas ou l'on essaie de centrer une balise html <img />.
- il faut savoir que la balise img n'est pas considérée comme un block par défaut
donc vous ne pouvez pratiquer un margin: 0 auto; ou margin-left: 0 auto; et margin-right: 0 auto;
que si vous appliquez comme propriété display: block;
Donc pour centrer une image il vous suffit de faire :
dans le code html :


<img src="urlimage" alt="alternativtext" />
et dans le code css :
img {
display: block;
margin: 0 auto;
height: XXXpx; /* spécifiez la hauteur de l'image, une bonne attitude à prendre */
width: XXXpx; /* spécifiez la largeur de l'image, une bonne habitude à prendre */

}


une autre façon d'afficher une image avec le css qui peut être intéréssant dans le cas ou l'on veut absolument séparer le graphisme du code html, il s'agit tout simplement de créer un div et d'y foutre un arrière-plan.
dans le code html :


<html>
<body>
<!-- quelque part dans le code -->
<div id="bandeau"></div>
<!-- quelque part dans le code -->
</body>
</html>


dans le code css :


#bandeau {
/* Dans cette methode inutile d'ajouter display: block un div est block par defaut mais vous le pouvez */
background : transparent url("lien image") no-repeat;
height : XXXpx;
width : XXXpx;
margin : 0 auto;
}


Encore une autre façon de centrer une image sans la balise <img /> et sans le div c'est le span :
dans le code html :


<span class="bandeau"></span>
dans le code css :
span.bandeau
{
background : transparent url("lien image") no-repeat;
height : 49px;
width : 163px;
margin : 0 auto;
display : block; /* trés important ici car le span n'est pas un block par defaut */
}


Petit rappel :
pour modifier un élément html quelqu'il soit par le biais de l'attribut <balise class="classification" /> il faut dans le css :


balise.classification
{
bla bla bla.
}


***
pour modifier un élément html quelqu'il soit par le biais de l'attribut <balise id="identification" /> il faut dans le css :
#identification /* on stylise la balise par son id */


{
bla bla bla.
}

   
Répondre à zinkweb

9

roméo16, le 20 oct 2008 à 21:16:53

Toutes ses façons de faire me donnent le mal de mer... beurkkkkkk!!!

je trouve beaucoup plus simple d'introduire (=background-position: center;) dans le CSS...


non ???

et dire ke je ne suis dans le xhtml, le CSS et le php que depuis ce matin...

   
Répondre à roméo16

11

asquel, le 16 jan 2009 à 11:15:06

Romeo16 : c'est peut être parceque tu n'y est que depuis ce matin que cela te donne envie de vomir.
Si il y a des normes c'est pas pour rien, pour centrer une image il faut la mettre en type block et margin 0 auto, c'est tout.

Bref c'est pas de ta faute si t'es mauvais, mais ne diffuse pas ta merde aux autres ...
La programmation web c'est un métier

   
Répondre à asquel

12

roméo16, le 18 jan 2009 à 07:52:29

Au lieu de sur-ligner mon envi de *** (* mises par moi-meme), il aurai été tellement plus simple que tu donne TA solution... au final, tu es surement aussi mauvais que je l'etais a la date du post... A MEDITER

   
Répondre à roméo16

13

nobodie, le 29 jun 2009 à 14:32:40

"width: XXXpx; /* spécifiez la largeur de l'image, une bonne habitude à prendre */"


Spécifier la taille de l'image DANS la CSS ??? c'est bien du n'importe quoi ça...
Tu perds toute la souplesse des styles, imagine si aucune des tes images ne fait la même taille, tu fais comment ?... un style par image ??? :) :) :)

Je pense que tu confonds avec "la bonne habitude a prendre" de spécifier les tailles d'images tel que :

<img src="imag.jpg" alt="ma belle image" width="200" height="100" />


a+

   
Répondre à nobodie

10

informatique facile, le 23 oct 2008 à 12:48:44

Sémantiquement parlant, le background-image dans le CSS n'a strictement aucun intérêt.
Il vaut mieux coder une image en dur sans oublier les balises "alt" sur les images pour donner
du poids aux mots.
Les marges négatives fonctionnent très bien sur tous les navigateurs : http://latarteauchips.free.fr/css/css-centrer-bloc.php

   
Répondre à informatique facile
Posez votre question Répondre
Ils ont besoin de votre aide