28234 sujets

CSS et mise en forme, CSS3

Centrer img flex

Bonsoir
J'essaie de centrer une image dans une boite flex ...... en vain
Sur cette page l'image de gauche
http://www.taina64.net/layout/layout.html

avec une class css

.flex-center-vertically {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  height:100px;
}


(Le code css est sur la page html.)

Si vous avez une piste ?

Merci

Bonne soirée
Modifié par africa (12 Feb 2016 - 07:28)
Modérateur
il te faudrait imbriquer les flex pour en faire usage dans les enfants.

ta feuille de style modifiée:
.container {
  display: flex;
  flex-flow: row wrap;
}

header,
article,
footer,
aside,
#pub {
  display: flex;/* ajout de flex aussi, principalement pour aside */
  flex: 1 100%;
  margin: 5px;
  background: tomato;
  justify-content: center;
  align-items: center;
}

.img {
  width: 100%;
  height: auto;
}

.flex-center-vertically {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-items: center;/* peut-etre utile */
  height: 100px;
}

@media all and (min-width: 480px) {
  .aside {
    flex: 1 auto;
  }
}

@media all and (min-width: 760px) {
  article {
    flex: 2 0px;
  }
  header {}
  .aside1 {
    flex: 1;
    justify-content: center;
  }
  article {}
  .aside2 {
    flex: 1;
  }
  footer {}
  #pub {}
}

@media (max-width: 1600px) {
  / body {
    max-width: 1600px
  }
}

Modifié par gcyrillus (11 Feb 2016 - 21:19)
Bonjour

La solution de gcyrillus fonctionne à merveille, mais je souhaiterai que l'image soit centrer en haut du flex et pouvoir mettre du texte ou une ul sous l'image, j'ai suivi la formation en ligne elephorm sur les flex hier soir, mais je n'ai pas trouvé de solutions, pas tout compris Smiley decu

Est il possible de faire cette mise en place ?

J'ai réussi a mettre l'image en haut de la boite flex avec

 align-self:baseline;


Mais je n'arrive pas à mettre du texte sous l'image, la flex s'agrandit et le texte passe à droite, de même dans les autres boites le texte est centré dans la boite .....

http://www.taina64.net/layout/layout.html

Merci pour votre aide


Bonne journée

Merci

Bonne Journée
Modifié par africa (12 Feb 2016 - 08:12)
Sujet clos
Aller à