Partage
  • Partager sur Facebook
  • Partager sur Twitter

[CSS] Comment centrer une image !?

Sujet résolu
17 mars 2011 à 21:28:54

Bonsoir,

voial je voudrais savoir comment centrer une image ? Car moi j'insère 'image dans le code html et je centre dans Css avec text-align : center, mais je voudrais savoir comment fait le tout a partir du CSS ? Sans les margin svp ?!

Merci
  • Partager sur Facebook
  • Partager sur Twitter
17 mars 2011 à 21:48:57

avec les balises <center> </center>
  • Partager sur Facebook
  • Partager sur Twitter
17 mars 2011 à 21:52:43

Arg, je me suis pal expliquer, dans le code Css je mais background-image: url("****.png"); puis il reste a gauche comment le mettre au millieu ?!
  • Partager sur Facebook
  • Partager sur Twitter
17 mars 2011 à 23:31:30

Essaie text-align : center ; dans ton css. Si ça marche pas, te reste plus qu'à mettre ton image entre les balises <center></center>, dans le html comme l'a dit Blacksnake !
  • Partager sur Facebook
  • Partager sur Twitter
17 mars 2011 à 23:34:48

Oui mais le jour ou je voudrais changer de design je serais obliger de chercher sur le html et que si sa aurai eter sur le code css sa serai mieux, et text-align: center, marche que pour le texte !?
  • Partager sur Facebook
  • Partager sur Twitter
17 mars 2011 à 23:55:51

J'ai eu le même problème aujourd'hui justement pour info je débute) voilà ce que j'ai fait.

Tout d'abord dans un fichier html, j'ai mis:

<div class="Site_Name">nom de mon site</div>



Puis dans un fichier css, j'ai mis différentes infos pour définir la class:

.Site_Name
{
font-size: 80px;
color: red;
background-image:url("Images/Test_Cadre.JPG");
text-align: center;
line-height: 160px;
width: 591px;
height: 191px;
margin-left:auto;
margin-right:auto;
}

Ce qui est important, c'est de définir la taille de la <div> (par rapport à celle de l'image) puis d'utiliser des "margin-left" ET "margin-right" sur la valeur "auto".

Bien sûr il ne faut pas oublier le "text-align: center;"
  • Partager sur Facebook
  • Partager sur Twitter
18 mars 2011 à 11:14:25

Bonjour

Background-position : center center

Non ?
  • Partager sur Facebook
  • Partager sur Twitter
18 mars 2011 à 11:30:37

Ooo, peut etre Mab07 je vais essayer merci bcp !
  • Partager sur Facebook
  • Partager sur Twitter
18 mars 2011 à 11:43:03

+1 avec mab07

Sinon la balise <center> n'est pas obsolète ?
  • Partager sur Facebook
  • Partager sur Twitter
19 mars 2011 à 16:55:20

C'est vrai que la balise <center> est un peu obsolète, mais elle marche très bien x) ! Sinon, text-align : center marche aussi pour les images il me semble.
Très bonne idée Mab07, j'y avais même pensé :'(.
  • Partager sur Facebook
  • Partager sur Twitter
19 mars 2011 à 17:27:10

Background-position : center, text-align: center marchant pas a partir du css pour center une image, et <center></center> sa marche je sais, mais se que je veut ses :

.truck
{
   background-image: url("image.png");
   background-repeat: no-repeat;
}


et je veut ajouter un code pour le centrer sans faire de margin svp, j'ai essayer background-position: center; et sa marche pas et pareil pour text-align: center (sa ne centre que le texte !)

Merci
  • Partager sur Facebook
  • Partager sur Twitter
19 mars 2011 à 19:35:16

déjà entre centrer un background et une image ce n'est pas la même chose :euh:

Donc pour background je confirme mon +1 pour mab07 :

Background-position: center center;


et non

Citation : Double

background-position: center;

  • Partager sur Facebook
  • Partager sur Twitter
19 mars 2011 à 20:15:00

Ok, merci et pour une image ?
  • Partager sur Facebook
  • Partager sur Twitter
26 décembre 2016 à 11:37:51

Merci, vous me sauver je débute en html et j'essayais depuis quelques jours à centrer une image avec css , c'est trop chiant, faites comme dit dit blacksnake c'est beaucoup plus simple et au moins ça marche. Merci, blacksnake
  • Partager sur Facebook
  • Partager sur Twitter
26 décembre 2016 à 13:19:31

Oui alors non, hein.

Déjà : remonter un sujet qui a un sujet pour dire ça… et surtout pour appuyer la pire des solutions proposées dans le topic, c'est non. En 2011, <center> était déjà obsolète depuis 1999, alors devine en 2016 : c'est pareil. (mais pire)

Pour centrer, une bonne fois pour toutes :

  • soit on donne text-align: center au parent de l'élément, si ce dernier a un rendu inline ou inline-block
  • soit on donne à l'élément margin: 0 auto s'il a un rendu block
  • Partager sur Facebook
  • Partager sur Twitter

Pas d'aide concernant le code par MP ni par mail, le forum est là pour ça :) Postez votre code html et css (bouton '</>') !!

2 janvier 2017 à 15:46:04

Bonjour Lamecarlate, 

Il y a quelque chose que je ne comprends pas, et comme je débute complètement et qu'évidement je galère à mort, j'espère que la question ne fâchera personne :-) : 

Je ne comprends pas pourquoi une solution qui fonctionne se doit d'être obsolète... Peut-être que pour la forme, le code n'est pas élégant, mais tant que le résultat donne l'effet escompté, pourquoi ne pas l'utiliser ? D'autant que j'ai beau cherché, je ne vois toujours pas comment centrer une image puisque aucune des solutions que je trouve ne fonctionne :) 

  • Partager sur Facebook
  • Partager sur Twitter
2 janvier 2017 à 15:50:40

Bonjour moi-jeux,

center est obsolète parce qu'il a été créé à une époque où CSS n'existait pas, où on mélangeait fond et forme dans le HTML parce qu'on n'avait que ça sous la dent. Maintenant (c'est-à-dire depuis 1999) on essaie de séparer contenu (HTML) et décoration (CSS). Ce n'est pas une question d'élégance, mais de sens, de sémantique. Dans les faits, tu peux tout à fait manger une soupe avec une louche plutôt qu'une cuillère : ça fonctionne, mais c'est pas trop fait pour ça, ce n'est pas adapté. Ici, c'est pareil.

As-tu essayé les solutions que j'ai donné plus haut ?

  • Partager sur Facebook
  • Partager sur Twitter

Pas d'aide concernant le code par MP ni par mail, le forum est là pour ça :) Postez votre code html et css (bouton '</>') !!

2 janvier 2017 à 16:26:45

Bon text-align fonctionne.. je ne sais pas ce que j'avais fait avant mais bon... par contre, je n'arrive même pas à mettre mon titre en rouge ni à le mettre en 2em.... pffffffffffffffffffffffffffffffffffffffwx<je sais aucun rapport avec le sujet... je fais un des exercices de Mathieu dans l'un de ses cours...

-
Edité par moi-jeux 2 janvier 2017 à 16:48:49

  • Partager sur Facebook
  • Partager sur Twitter
2 janvier 2017 à 16:56:41

aucun rapport avec le sujet

Dans ce cas, crée un autre sujet, nous avons déjà assez pollué celui-là… (il date de 2011, est résolu, et l'OP ne s'est pas connecté⋅e depuis 2011)

  • Partager sur Facebook
  • Partager sur Twitter

Pas d'aide concernant le code par MP ni par mail, le forum est là pour ça :) Postez votre code html et css (bouton '</>') !!

20 mai 2017 à 19:50:13

Bonjour c'est trés simple dans une figure comme c'est le cas de cet exercice:

un fichier .CSS

h1
{
text-align: center;
}
et ça marche!!
  • Partager sur Facebook
  • Partager sur Twitter
20 mai 2017 à 20:23:23

Merci d'arrêter de remonter ce sujet, la solution a déjà été donnée.

  • Partager sur Facebook
  • Partager sur Twitter

Pas d'aide concernant le code par MP ni par mail, le forum est là pour ça :) Postez votre code html et css (bouton '</>') !!