Comment centrer une image dans un élément flexible (cellule)
Colin Stewart
J'ai une flexbox 3x3 avec une icône et un titre dans chaque élément / cellule. J'essaye juste de centrer horizontalement l'icône (image svg). J'ai essayé justify-content: center;mais cela ne semble pas fonctionner. Quelqu'un peut-il me dire comment centrer horizontalement une image dans un élément flexbox (ou une cellule, comme je l'appelle)? Code ci-dessous.
HTML:
<div class="grid">
<div class="cell">
<img src="images/cs_icon_01.svg">
<div class="service-title">Materials Handling, Warehousing & Storage Facility Management</div>
</div>
<div class="cell">Content</div>
<div class="cell">Content</div>
<div class="cell">Content</div>
<div class="cell">Content</div>
<div class="cell">Content</div>
<div class="cell">Content</div>
<div class="cell">Content</div>
<div class="cell">Content</div>
</div>
CSS:
.grid {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
margin-bottom: 130px;
}
.cell {
flex: 0 0 30%;
height: 220px;
margin-bottom: 20px;
justify-content: center;
}
.grid img {
width: 45px;
}
.service-title {
display: inline-block;
font-family: Montserrat, Helvetica, Arial, sans-serif;
font-size: 16px;
font-weight: 300;
color: #4e4e4e;
line-height: 24px;
padding: 20px 16px 4px 16px;
text-align: center;
}
G-Cyril
vous pouvez essayer le classique display+ margin:
.grid img {
width: 45px;
display:block;
margin:auto;/* horizontal center effect */
}
ou utilisez text-align:
.cell {
flex: 0 0 30%;
height: 220px;
margin-bottom: 20px;
/*justify-content*/ text-align: center;
}