Impossible de centrer un texte sur une image

Bonjour,
J'ai une image en début de page, plein écran. Et j'ai mis un texte sur cette image.
Mais je n'arrive pas à le centrer:
voici le contenu en Html

<div class="image"><img src="C:\file1\schema1.jpeg" alt="/> 
<h1 class="texte1">Electromagnetisme</h1>
</div>

Et le CSS:

.texte1{
    position:absolute; 
    text-align: center;
    color: white;}

Je n'arrive pas à centrer le texte.
Merci pour votre aide.

Bonjour,

Par défaut, un élément bloc prend 100% de la largeur, mais le positionnement en absolu corrige ce comportement. Du coup le <h1> ne fait plus que la longueur de votre chaine de caractère.

La chaine est donc bien déclarée comme centrée, mais centrer une chaine de caractères dans un élément équivalent à sa largeur ne changera rien visuellement.

Supprimez le positionnement en absolute pour voir. Si sa raison d'être est de placer le titre avant l'image, il suffit alors de placer la balise <h1> avant l'image.

CQFD.

Bonjour et bienvenue sur le forum,

Il te manque quelques paramètres pour que ça fonctionne totalement (comme le positionnement de ton h1...) :

.image { position: relative; display: inline-block; }
.texte1{
  position:absolute; 
  top: 0; left: 0; right: 0;
  text-align: center;
  color: white;
}

... ça devrait fonctionner

Bonjour Olivier, merci pour la réponse.

Olivier C a écrit :
Supprimez le positionnement en absolute pour voir. Si sa raison d'être est de placer le titre avant l'image, il suffit alors de placer la balise &lt;h1&gt; avant l'image.

CQFD.

Mais je veux que le texte soit en surimpression sur l'image. Si je me mets en relative, il sera après l'image!

Bonjour Solid Snake, merci pour ton code.
C'est parfait.
Est ce que je peux une petite question en plus?
L'image a un très grand format d'origine (4000 x 3200). Et quand je suis au zoom 100%, elle est trop grande pour la page, il faut que je me mette à 70% pour qu'elle occupe juste l'écran tout entier.
Comment faire pour que cette image ne soit pas si grande?

Revoici le Html;

<div class="image"><img src="C:\file1\schema1.jpeg" alt="/> 
<h1 class="texte1">Electromagnetisme</h1>
</div>

Et le CSS:

.image { position: relative; display: inline-block; }
.texte1{
  position:absolute; 
  top: 80%; left: 0; right: 0;
  text-align: center;
  color: white;
}

Merci pour ton aide.

Bonjour,

abeille a écrit :
L'image a un très grand format d'origine (4000 x 3200). Et quand je suis au zoom 100%, elle est trop grande pour la page, il faut que je me mette à 70% pour qu'elle occupe juste l'écran tout entier.
Comment faire pour que cette image ne soit pas si grande?

Déjà, sache quand même que dans 99.9% des cas, il ne te sera pas nécessaire d'avoir une image aussi grande donc pour moi, première étape => retaille ton image.

Ensuite, pour ton soucis, il te faudra limiter la largeur de son parent, et de l'image, par exemple :

.image, .image img { max-width: 100%; }

Ce qui donne http://codepen.io/anon/pen/KzdVLe