J'essaie de centrer le texte dans un div avec une largeur de jeu. Je ne donne pas la largeur des centres de texte si je le fais pas. J'ai besoin de régler la largeur car elle affecte la taille du plus grand conteneur et je veux que les conteneurs soient de la même taille.
J'ai essayé de mettre une enveloppe dessus et de régler les marges gauche et droite à l'automobile. J'ai essayé cela directement. J'ai essayé Text-Align: Centre sur elle et sur une enveloppe. P>
.bg-yellow {
background-color: yellow;
}
.u-all-in {
padding: 4rem;
}
.u-all-out {
padding: 3%
}
.flex {
display: flex;
}
.flex-col {
flex-direction: column;
}
.flex-row {
flex-direction: row;
}
.flex-wrap {
flex-wrap: wrap;
}
.items-center {
align-items: center;
}
.grow {
transition: all .8s ease;
}
.br5 {
border-radius: .5em;
}
.br2 {
border-radius: .2em;
}
.xbig-icon {
width: 10rem;
height: 10rem;
}
.center {
justify-content: center;
align-items: center;
}
.dark-gray, h1, h2, h3 {
color: #383A42;/*#2B2C34;*/
}
.bright-blue {
color: #1ABFD8;
}
.hover-ul:hover > .hover-ul {
border-bottom: 1px solid;
}
.hover-bblue:hover > .hover-bblue {
color: #1ABFD8;
}
.w-train-desc {
margin-right: auto;
margin-left: auto;
width: 220px;
display: inline-block;
}
3 Réponses :
est-ce ce que vous étiez après?
p>
<div class="br2 flex flex-row flex-wrap">
<div class="u-all-out">
<a class=" flex br5 bg-yellow shadow-1 center flex-col hover-bblue grow hover-ul u-all-in" href="">
<div class="flex">
<img class="xbig-icon br5 mb2" id="train_img_1">
</div>
<h4 class=" dark-gray items-center hover-bblue w-train-desc" id="train_title_1"> Here is something</h4>
<h6 class="flex bright-blue items-center hover-bblue rm-mb rm-mt italic hover-ul">Start here</h6>
</a>
</div>
<div class="u-all-out">
<a class=" flex br5 bg-yellow shadow-1 center flex-col hover-bblue grow hover-ul u-all-in" href="">
<div class="flex">
<img class="xbig-icon br5 mb2" id="train_img_2">
</div>
<h4 class="dark-gray items-center hover-bblue w-train-desc" id="train_title_2"> Here is another</h4>
<h6 class="flex bright-blue items-center hover-bblue rm-mb rm-mt italic hover-ul">Start here</h6>
</a>
</div>
</div> text-alignement: centre; à la classe
Est-ce que je manque quelque chose? - Quand je mettais un centre d'alignement textuel dessus, cela fonctionne.
.w-train-desc {
width: 220px;
text-align:center;
}
Je jure que c'était la première chose que j'ai essayée. Mais oui cela fonctionne. Merci.