J'ai parcouru de nombreux postes sur ce sujet, mais les solutions traditionnelles ne semblent pas fonctionner. Je fais très probablement quelque chose de mal mais je ne peux pas voir quoi. J'essaie de centrer le texte dans une DIV pendant que cela reste à gauche justifié. Voici mon code / MARKUP:
html CSS Pour le moment, je l'ai configuré pour que le texte dans le titre div soit laissé justifié, et le titre div est centré dans la maison DIV (au moins, je pense que c'est ce qui se passe.) J'ai aussi Essayé Flex Box, mais en vain. Je pense que la question concerne le fait que le texte dans la balise H1 enveloppe, laissant de l'espace sur le côté droit (sélectionné en rouge ci-dessous). Voici ce que je veux dire: Merci d'avoir cherché, j'apprécie toutes les suggestions! 
5 Réponses :
Je pense que vous avez besoin de cela. P>
p>
<div class="home"> <div class="title"> Hi, I'm <a href="#">name</a>. This is some of my <a href="#">work</a>. </div> </div>
Merci d'avoir répondu! J'ai essayé cela mais j'ai toujours le même problème. Le DIV dans lequel le texte réside est centré, mais le texte lui-même n'est pas.
Édité. Voir maintenant ... et laissez-moi savoir que c'est OKey ou non. Il y a un autre moyen. @Theredtophat
Malheureusement, le même Thinkg se produit. Le Div Red Div est centré et le jaune DIV est centré dans ce domaine, mais le texte n'est pas centré dans la DIV.
Mais il cherche le centre
.title {
display: inline-block;
text-align: center;
color: var(--text-primary);
float:left;
}
Malheureusement, cela ne résout pas mon problème. Merci quand même!
J'essaye habituellement de cela lorsque je veux centrer quoi que ce soit donc j'espère que cela fonctionne avec vous.
Essayez de donner une largeur "home": 100% et à "titre" Margin-gauche: auto; Marge-droite: auto
J'ai réussi à faire fonctionner cela pour fonctionner par "rétrécir-enveloppement" le titre div au texte à l'intérieur, de sorte que le texte ait été centré à l'intérieur, puis utilisez la maison DIV comme une boîte flexible dans laquelle le titre div a été centré.
.home {
padding: 5% 0;
margin-top: 10%;
width: 100%;
height: auto;
display: flex;
align-items: center;
justify-content: center;
font-size: 5.5rem;
font-weight: 800;
color: var(--text-primary);
}
.title {
width: max-content;
}
Essayez un emballage supplémentaire dans le titre et définissez l'affichage: Flex; Justify-Content: Centre; sur .title;
Est-ce que cela répond à votre question? CSS: bloc central, mais alignez le contenu à gauche
PythonMaster202 J'ai regardé cela et j'ai essayé de le reproduire, mais cela n'a pas fonctionné. Merci pour le commentaire cependant.
@Seandoherty j'ai essayé cela mais pas de dés, le texte n'est toujours pas centré. Merci pour la suggestion cependant.
Pouvez-vous construire un codépen? Parce que j'ai copié votre code et que cela fonctionne de toute façon, mais ne ressemble rien à votre exemple - je pense donc qu'il y a des styles contradictoires d'ailleurs?
Bien sur, vas y. Merci de regarder. (J'ai fait quelques modifications basées sur les suggestions d'autres personnes, mais le problème persiste toujours.) CODEPEN.IO/ RoadRunner645 / Pen / Bawnog