[Résolu] Text-align: center ne fonctionne pas!

Bonjour,
j'ai donc découvert le Validateur de code ce matin, c'est vraiment parfait!

Mais il me dit que <center> n'est plus valable en Html. Il faut le remplacer par une classe et en CSS: .center{text-align: center;}
Cependant ça ne fonctionne pas, cela n'aligne pas le texte au centre. Savez vous pourquoi?
Voici le Html:

<div id="header">
<a class="info"><img src="C:/Users/lanor/Desktop/sitebombe/photosbombes/fission11.png" alt="header"><span>Un noyau d'atome capture un neutron</span></a>
...
<a class="info"><img src="C:/Users/lanor/Desktop/sitebombe/photosbombes/fission44.png" alt="header"><span>les neutrons sont capturés par d'autres noyaux d'atomes <br />qui seront brisés à leur tour ... et ainsi de suite</span></a></div>

<span class="centrer"><span class="rouge">Fission nucléaire. Passez la souris sur les images.</span></span><br />

le Css:

.centrer{
text-align: center;}

Merci pour vos explications.

Bonjour,

Un <span>, par défaut, est un élément inline et n'occupe que la taille de son contenu. Il est possible de l'afficher tel un block en modifiant sa valeur de display :

.centrer{
display: block;
text-align: center;
}

<span class="centrer"><span class="rouge">Fission nucléaire. Passez la souris sur les images.</span></span><br />

Tu sembles avoir imbriqué deux spans pour appliquer deux classes à ton texte.

Peut-être ignores-tu que tu peux appliquer plusieurs classes à un élément en les séparant par un espace, comme ceci :

<span class="centrer rouge">Fission nucléaire. Passez la souris sur les images.</span><br />

Bonne continuation.
Modifié par thierry (12 Mar 2016 - 11:33)

La logique serait en fait :

<div>
...
</div>
<p  class="centrer rouge">Fission nucléaire. Passez la souris sur les images
</p>

au revoir le span et le br

Un div et un span ne sont pas supposés se cotoyer
:)
Modifié par gcyrillus (12 Mar 2016 - 15:16)

Je reviens sur le sujet, car si mon problème de centrage a été résolué pour le texte, ça ne marche pas pour une image.
Ainsi dans le Html:

<p class="centrerimage"><img src="C:/Users/lanor/Desktop/sitebombe/photosbombes/pastillesuranium5.png" alt="" />Ces pastilles d'uranium seront placées dans ces barres qui iront dans le réacteur.</p>

Et dans le Css:

.centrerimage{
text-align: center;
}

Eh bien, ça ne centre pas!
Vous savez où elle est l'erreur?
Merci pour vos explications.

Apparement oui, sauf si tu attends autre chose ? http://codepen.io/anon/pen/ZWpOrP

gcyrillus a écrit :
Apparement oui, sauf si tu attends autre chose ? http://codepen.io/anon/pen/ZWpOrP

Merci pour ton explication. Jamais vu un code image aussi long!

Mais je ne comprends pas le hr + p.centrerimage img {
C'est quoi cette notation en CSS avec un +?
hr pour ligne mais après, comment est ce qu'on peut mettre un +?

Ensuite, ce qui est curieux, c'est que l'image se centre bien, mais pas la légende!

alt="" />Ces pastilles d'uranium seront placées dans ces barres qui iront dans le réacteur.</p>

Pourtant j'ai recopié exactement le code que tu m'as mis! Alors qu'avec ton exemple, l'image et la légende sont bien centrés!
Curieux non?


Merci encore.
Modifié par abeille (13 Mar 2016 - 08:25)

le + et le ~ sont des sélecteurs d'adjacences . voir: https://developer.mozilla.org/en-US/docs/Web/CSS/Adjacent_sibling_selectors
hr + div : cible un div juste aprés un hr dans le HTML

hr ~ div cible tout les div derriere et au même niveau, même si il y a d'autre balises entre eux.

Pour l'image dans le src, il s'agit de https://developer.mozilla.org/fr/docs/Web/HTTP/data_URIs

si ton texte ne se centre pas, il y a probablement une raison , peut tu mettre un exemple en ligne qui reproduits ton défaut ou le code qui permet de reproduire ton défaut ?

Salut Gcyrilus,
j'ai mis exactement le code que tu m'as donné.
Le Html

<p class="centrerimage"><img src="http://zupimages.net/viewer.php?id=16/10/6cqy.png" alt="" />Ces pastilles d'uranium seront placées dans ces barres qui iront dans le réacteur.</p>

Le Css:

p.centrerimage img {
  display:block;
  margin:auto
}

Et j'obtiens ça:

Modifié par abeille (13 Mar 2016 - 17:16)

[quote=abeille]Salut Gcyrilus,
j'ai mis exactement le code que tu m'as donné.
Le Html

<p class="centrerimage"><img src="http://zupimages.net/viewer.php?id=16/10/6cqy.png" alt="" />Ces pastilles d'uranium seront placées dans ces barres qui iront dans le réacteur.</p>

Le Css:

p.centrerimage img {
  display:block;
  margin:auto
}

Et j'obtiens ça:


Impossible de mettre ces pastilles d'uranium au milieu!
Merci pour ton aide.
Modifié par abeille (13 Mar 2016 - 17:19)

Salut.

Bon, tout d’abord, tu devrais enlever le "Résolu" de ton titre si tu veux que des gens répondent.

Ensuite, pour faire ce que tu sembles vouloir faire (centrer une image et sa légende dans une page) il y a plusieurs façons de faire, en fonction de ton code HTML.

Tout d’abord, si le texte qui suit l’image est vraiment une légende de l’image, tu devrais utiliser la balise figure qui est sémantiquement faite pour ça :

<figure>
	<img src="" alt="" />
	<figcaption>Légende</figcaption>
	<!-- figcaption peut contenir des <br>, <a>...-->
</figure>

Ensuite, il faut que tu comprennes les histoires de display. Une image est naturellement en display inline. Du coup, tu peux la centrer avec un text-align: center sur le parent. Mais il y a aussi des solutions en forçant ton image en display: block avec les margin: auto comme proposé plus haut.

Du coup, je te conseil :
1. de bien choisir ton code HTML en fonction de tes besoins (notamment en utilisant <figure> si c’est adéquat) et de le figer
2. De lire cet article d’Alsacréation : http://www.alsacreations.com/article/lire/539-Centrer-les-elements-ou-un-site-web-en-CSS.html

Si après ça tu ne t’en sors toujours pas, reviens poser ta question ici en donnant le code HTML final qui pourra nous servir de base pour choisir le CSS qui va bien.
Modifié par Derwoed (14 Mar 2016 - 11:44)

Derwoed a écrit :
Salut.
<figure>
<img src="" alt="" />
<figcaption>légende</figcaption>
<!-- figcaption peut contenir des des <br>, <a>...-->
</figure>
[/code]
Du coup, je te conseil :
1. de bien choisir ton code HTML en fonction de tes besoins (notamment en utilisant &lt;figure&gt; si c’est adéquat) et de le figer
2. De lire cet article d’Alsacréation : http://www.alsacreations.com/article/lire/539-Centrer-les-elements-ou-un-site-web-en-CSS.html

Si après ça tu ne t’en sors toujours pas, reviens poser ta question ici en donnant le code HTML final qui pourra nous servir de base pour choisir le CSS qui va bien.

Mais si mais si, j'ai très bien compris.
Ton exemple très clair m'a montré comment il fallait faire.
Et le lien que tu as donné donne sur une explication très claire aussi.

Fin d'un problème qui me durait depuis longtemps.
C'est en fait tout simple.

MErci Derwoed.
A plus
Modifié par abeille (14 Mar 2016 - 22:22)

abeille a écrit :
[quote=abeille]Salut Gcyrilus,
j'ai mis exactement le code que tu m'as donné.
Le Html

<p class="centrerimage"><img src="http://zupimages.net/viewer.php?id=16/10/6cqy.png" alt="" />Ces pastilles d'uranium seront placées dans ces barres qui iront dans le réacteur.</p>

Le Css:

p.centrerimage img {
  display:block;
  margin:auto
}

Et j'obtiens ça:
upload/61389-777777777C.png

Impossible de mettre ces pastilles d'uranium au milieu!
Merci pour ton aide.

tu as zappé le text-align:center; (l'autre block css pour le conteneur et pas l'image)sur le parent, là tu ne ciblais que l'image et rien pour le texte.

Un manque d'attention probablement qui se repete quasi sur toutes tes questions... prend le temps d'analyser et comprendre les réponses, sinon tu continueras a passé a coté de petites choses essentielles.

figure et figcaption tu as déjà essayer et eu des réponses ... et hop ça te reviens
Modifié par gcyrillus (14 Mar 2016 - 23:58)

gcyrillus a écrit :
Un manque d'attention probablement qui se repete quasi sur toutes tes questions... prend le temps d'analyser et comprendre les réponses, sinon tu continueras a passé a coté de petites choses essentielles

Tu as entièrement raison et c'est pas la première fois qu'on me le fait remarquer!

La raison est simple: lorsque je n'arrive pas à trouver une solution à un problème, après avoir bien cherché sur le Net, je poste une question ici.
Mais comme il faut un peu de temps pour avoir la bonne réponse, je passe à un autre problème.

Finalement je me trouve avec plusieurs petits soucis à régler, et lorsque je reçois une réponse, je la lis un peu trop vite, ou je m'emmêle entre les problèmes et je passe à côté d'éléments importants.

Mais je suis tellement pressé de terminer la première page de mon site et de mettre en ligne!

Merci pour les explications. Et aussi à ce forum qui est vraiment étonnant, de par la qualité de ces cours et de celle des forumeurs.

A plus.