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

avec les balises <center> </center>

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 ?!

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 !

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 !?

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;"

Bonjour

Background-position : center center

Non ?

Ooo, peut etre Mab07 je vais essayer merci bcp !

+1 avec mab07

Sinon la balise <center> n'est pas obsolète ?

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é :'(.

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

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

Donc pour background je confirme mon +1 pour mab07 :

Background-position: center center;

et non

Citation : Double

background-position: center;

Ok, merci et pour une image ?

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

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 :) 

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 ?

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

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)

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

un fichier .CSS

}
et ça marche!!

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