Flux rss
Rechercher : dans
Par : Pertinence Date Nom d'utilisateur
Statut : Résolu

Comment centrer une image en css

Christopher, le dimanche 16 avril 2006 à 11:06:12
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
Répondre à Christopher  Signaler ce message aux modérateurs Aller au dernier message

1


  • Ce message vous semble utile, votez !
  • Signaler ce message aux modérateurs
king, le dimanche 16 avril 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


  • Ce message vous semble utile, votez !
  • Signaler ce message aux modérateurs
gintoxic, le samedi 4 août 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


  • 1    Ce message vous semble utile, votez !
  • Ce message ne vous semble pas utile, votez !
  • Signaler ce message aux modérateurs
king, le samedi 4 août 2007 à 22:48:19
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

4


  • Ce message vous semble utile, votez !
  • Signaler ce message aux modérateurs
daruff, le samedi 4 août 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


  • Ce message vous semble utile, votez !
  • Signaler ce message aux modérateurs
roxalka, le samedi 26 avril 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


  • Ce message vous semble utile, votez !
  • Signaler ce message aux modérateurs
serval92, le vendredi 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


  • Ce message vous semble utile, votez !
  • Signaler ce message aux modérateurs
Mää, le vendredi 27 juin 2008 à 11:14:12
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


  • 1    Ce message vous semble utile, votez !
  • Ce message ne vous semble pas utile, votez !
  • Signaler ce message aux modérateurs
zinkweb, le lundi 11 août 2008 à 13:17:41
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


  • Ce message vous semble utile, votez !
  • Signaler ce message aux modérateurs
roméo16, le lundi 20 octobre 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

10


  • Ce message vous semble utile, votez !
  • Signaler ce message aux modérateurs
 informatique facile, le jeudi 23 octobre 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

Résultats pour Comment centrer une image en css

Rotation image CSS XHTML (Résolu) Bonjour, je suis un train de me faire un site internet en XHTML, et mon menu style téléphone portable affiche des petits icones auxquels j'aimerais ajouté une rotation. c'est a dire que j'aimerai que lorsque ma souris va sur un de ces... www.commentcamarche.net/forum/affich-7334237-rotation-image-css-xhtml
Probleme pour centrer image dans table (Résolu) Bonjour, Je n'arrive pas à centrer une image () verticalement dans une colonne d'une table. Voici mon script : www.commentcamarche.net/forum/affich-4019435-probleme-pour-centrer-image-dans-table
Centrer image sur kompozer (Résolu) Bonjour, je suis novice sur compozer, j'ai du mal avec le code html, je voudrais centrer mes images. images qui sont des liens vers d'autres pages, cette page est le menu en fait. je copie ma source : www.commentcamarche.net/forum/affich-6344133-centrer-image-sur-kompozer

Résultats pour Comment centrer une image en css

Les CSS pour présenter vos imagesPour 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... www.commentcamarche.net/faq/sujet-9100-les-css-pour-presenter-vos-images
Effets pour vos imagesAu 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... www.commentcamarche.net/faq/sujet-9314-effets-pour-vos-images
Centrer verticalement une page webPour centrer verticalement une page web, impossible de s'en sortir en css. Une solution bien pratique : JavaScript. 1. Le fichier .js 2. La page .html 3. Utilisation 4. Inconvénients 5. Rappel Merci à Dalida pour la source du fichier... www.commentcamarche.net/faq/sujet-9867-centrer-verticalement-une-page-web
1 2 3 Suivant

Résultats pour Comment centrer une image en css

Difficultés pour centrer mon site en CSS (Résolu)Bonjour à tous, Ca fait plusieurs jours que j'essayes toutes les solutions que j'ai trouvé sur le net pour centre mon site web en CSS. Je test pour le moment mon site en local avec EasyPhp sur IE 6 et Firefox. Sur Firefox, tout va bien mon... www.commentcamarche.net/forum/affich-2703171-difficultes-pour-centrer-mon-site-en-css
Div et css centrer txt verticalement (Résolu)Bonjour, je souhaite centrer le texte verticalement dans mon tableau. j'utilise des mais le texte se trouve en haut de la cellule. CSS: div.nav { text-align:right; vertical-align:middle; background-image:url(nav.png); height: 33px;... www.commentcamarche.net/forum/affich-7462634-div-et-css-centrer-txt-verticalement
[CSS] Aligner un contenant au centre (Résolu)Bonjour. Quelqu'un d'entre vous connaitrait-il la propriété css, si elle existe, qui permet d'aligner un contenant (comme une table ou un div par exemple) au centre ? Pour être plus claire, je cherche la propriété css qui remplace le... www.commentcamarche.net/forum/affich-719745-css-aligner-un-contenant-au-centre
1 2 3 Suivant

Résultats pour Comment centrer une image en css

Positionner des éléments grâce aux CSSIl est possible grâce aux feuilles de style de positionner au pixel près du texte ou des images grâce aux balises et . Cela est possible avec les versions 4 de Netscape et d'Internet Explorer, cependant cette technique reste hasardeuse... www.commentcamarche.net/contents/css/cssposition.php3
Les feuilles de styleProprié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... www.commentcamarche.net/contents/css/cssproperty.php3
1 2 3 Suivant