Je n'arrive pas à faire fonctionner text-align: en css - HTML/CSS - Programmation
Marsh Posté le 05-07-2014 à 21:23:20
Bonjour,
Tout élément crée une "boîte" dans laquelle il va s'afficher. C'est pas évident dans tous les cas mais ajouter une couleur de fond aide à voir à quoi elle ressemble.
Là tu utilises un span, qui est un élément en ligne (comme a ou strong) : sauf style spécifique, l'élément fera la taille strictement nécessaire à son rendu.
Au contraire un div (ou un paragraphe ou un titre h1-h6) est un élément de type bloc : il va occuper toute la largeur laissée disponible par son parent. Si son parent c'est body, c'est toute la largeur de la page moins le padding de body. Bien entendu si on le style différemment, il se comportera différemment.
Si tu essayes de centrer un élément qui fait 165px de large dans une boîte qui fait exactement la taille nécessaire soit 165px bah il se passe rien.
Si maintenant l'élément fait la largeur de la page ou la moitié, là oui on observe quelque chose.
Tu retrouves les 3 cas dans cet exemple en ligne : codepen (clique sur l'avant-dernier bouton du panneau JS pour le réduire et mieux voir les 2 autres)
Pour les pros : oui oui %inline et %block c'est HTML 4.01 et plus HTML5. osef
EDIT: Centrer les éléments ou un site web en CSS
Je te laisse ajouter sur le Codepen margin: 0 auto; et voir dans quel cas ça fonctionne et dans quel cas non
Marsh Posté le 05-07-2014 à 21:29:50
La syntaxe est :
text-align:center; |
Mais il faut rajouter une largeur, sinon le centrage ne se voit pas, car il est au centre de lui-même. Il faut aussi ajouter display:inline-block;.
Par exemple, le code suivant marche :
Blabla<span style="text-align:center;display:inline-block;width:300px;">TEXTE TEXTE </span>blabla |
Marsh Posté le 05-07-2014 à 21:51:05
Merci pour vos réponses, je vais essayer tout ça, si j'arrive à tout comprendre (surtout le message d'islis)
Je précise également que le texte que je voudrais justifier se trouve dans une cellule de tableau <bh> </bh>
Marsh Posté le 06-07-2014 à 08:21:52
th tu veux dire ?
Le texte est centré par défaut dans un th.
Tu as peut-être une classe sur ta table ou tes th qui fait le contraire.
Marsh Posté le 07-07-2014 à 18:00:48
je vous avoue ne pas tout avoir compris, désolé je débute et j'étais habitué à faire des sites web à l'aide de logiciel WISIWIG
Voici mon style.css
Spoiler : html, body { |
Et j'ai ajouté les balises <h1> </h1> sur mon titre au lieu de définir une class, car je n'y arrivais toujours pas...
Voici le code du début de la page
Spoiler : <html> |
Voilà, quand j'applique une marge cela fonctionne mais pas la valeur test-align ou font-style
Marsh Posté le 07-07-2014 à 18:15:19
Pas convaincu par ton code, j'ai l'impression que tu emploies une table pour construire le layout !
C'est bien sur le texte qui est centré par un th, si tu mets un div dedans, tu dois dire à ce div d'être centré
.flvcashplayer {margin: 0 auto}
Pour ton deuxième th, mets ton text dans un <p> plutôt que un span (c'est la règle du display expliqué plus haut).
Mais si tu parles un peu plus de ton projet, ce que tu essaies de faire, l'aide sera plus complète, car tu es mal parti je pense.
Marsh Posté le 05-07-2014 à 20:27:07
Bonjour,
Je début en création de sites web
voici mon code sur la page html
et mon code CSS (j'ai testé font-style mais également text-align mais c'est pareil, aucun changement de mise en forme sur la page)
je fais bien appel au fichier style dans le code :
Je tiens à préciser que le reste fonctionne : couleur, gras, taille de police, etc.
Une idée ? Merci
Message édité par MrBrown91 le 05-07-2014 à 20:30:01