J'ai un petit problème: je veux centrer un élément (h2) horizontalement dans un header, tout en mettant
text-align: right;
pour que le sous-titre (h2) soit en légér décalage par rapport au titre h1.
j'ai donc mis comme marges:
margin: 0 auto;
mais lorsque j'inspecte la page, je vois que les marges gauche et droite sont de taille différentes, et que leur rapport n'est pas fixe (parfois la marge gauche est plus grande que la droite, parfois c'est l'inverse).
Comment faire pour que les marges soient de même taille sans pour autant avoir des marges fixes ou en pourcentage?
Si tu voulais du pixel alors défini la marge en pixel :/ Auto avec margin right ou left est gerer en fonction de l'espace restant. De toute manière je n'utilise jamais auto avev margin top right left ou autre juste margin: auto ok ensuite pour le reste tu peux utise les différentes unités de mesures: px, vh, vw...
Et dans le code que tu as mis au dessus tu avais mis
car je veux couvrir plusieurs largeurs de page sans avoir à utiliser trop de
@media (max-width:...){
}
PROBLEME:
Voici des screens de ma page à différentes largeurs:
On voit bien que le sous titre n'est pas fixe par rapport au titre, même si j'admets que pour le premier cas je pourrais utiliser
@media
comment résoudre ce problème, sachant que je ne peux pas utiliser d'unités absolues ni même des pourcentages, car le texte ne chage pas de taille mais la fenêtre oui...
Merci d'avance pour tout aide!
pensez à mettre un pouce en l'air si le message vous a aidé!
Si ce sous titre est placé dans une balise de type p div ou autre en gros une balise de type block tu lui fais comme css
width:100%;
text-align:center
ca devrait marcher si tu n'as pas utilise de display flex ou autre qui pourrait deranger.
Pas besoin de media queries.
Width:100% pour lui dire qu'il occupe 100% de la largeur comme ca tect-align center centrera toujours le texte
Si tu appliques cette meme regle sur la div du dessus ou le gros titre plutôt sans display flex ou autre ca devrait te donner le resultat que tu attends
Si je reprend ta page https://zengarden.pierreneillo.repl.co/ en l’état avant tes modifications, c'est le margin-right à 20% que tu appliques sur ton h2 qui pose soucis tout simplement.
Donc retire le margin-right 20% et remplace text-align: right par center et c'est réglé.
Et pour que ton h2 soit vraiment centré, retire également le padding-right de 10px.
Par défaut, les balise de type <Hn> font déjà 100%, inutile de le préciser en css! Dans ton cas, tu avait aussi fixé la largeur de ton h2 à 75% avec une largeur maximale de 500px. Tu peu également retirer ces 2 attributs.
Edit : J'ai mal compris la demande initiale. Tu ne veux pas center le texte mais juste ton h2. Dans ce cas, retire juste le margin-right à 20%. Tu devrai obtenir le rendu souhaité.
- Edité par Lord Morpheus 10 septembre 2021 à 21:59:42
Lord Morpheus, Seigneur Morphée, Dieu Grecs des Songes, Fils de la Nuit et du Sommeil
pensez à mettre un pouce en l'air si le message vous a aidé!
yasakani no magatama
pensez à mettre un pouce en l'air si le message vous a aidé!
yasakani no magatama
pensez à mettre un pouce en l'air si le message vous a aidé!
yasakani no magatama
pensez à mettre un pouce en l'air si le message vous a aidé!
Lord Morpheus, Seigneur Morphée, Dieu Grecs des Songes, Fils de la Nuit et du Sommeil