web-dev-qa-db-fra.com

Flexbox - centrer le texte verticalement

J'ai une boîte flexible, de forme carrée, complètement recouverte d'un hyperlien. 

Maintenant, je veux centrer verticalement le contenu de la flexbox.

Cependant, utiliser un élément div avec la propriété display: table et une imbriquée div avec la propriété display: table-cell; vertical-align: middle ne fonctionne pas, car je perds la forme carrée.

Si j'utilise divs au lieu de ul et li, je perds la propriété de pouvoir cliquer partout.

Je voudrais que "Texte" soit aligné dans les centres horizontal et vertical de la boîte rouge:

body {
  margin: 0px;
  width: 100%;
}
main {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}
.flex-container {
  width: 100%;
}
ul {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  -webkit-padding-start: 0px;
  -webkit-margin-before: 0px;
  -webkit-margin-after: 0px;
}
li {
  display: flex;
  flex-direction: column;
  width: 50%;
}
.red {
  background-color: red;
}
.white {
  background-color: white;
}
.tile:before {
  content: '';
  float: left;
  padding-top: 100%;
}
.tile {
  text-align: center;
}
<main>
  <div class="flex-container">
    <ul>
      <li class="red">
        <a href="/">
          <div class="tile">
            Text
          </div>
        </a>
      </li>
    </ul>
  </div>
</main>

htmlcsscss3flexboxcentering
6
Skrodde

main {
  height: 200px;
  width: 200px;
}
a {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: red;
  height: 100%;
}
<main>
  <a href="/">
    <div class="tile">Text</div>
  </a>
</main>

12
Michael_B

Dans votre déclaration .tile, vous avez besoin du code flexbox comme suit:

justify-content: center;
display: flex;
align-items: center;

Votre déclaration LI devrait simplement être display: block car elle n’utilise pas les propriétés de flexbox.

2
Zack Kirby

J'ai supprimé la partie :before de .tile et je l'ai déplacée vers la balise a (maintenant class-ed click-container. Comme il ne semble pas ce qu'il devrait être. Vous voulez que l'élément a soit lui-même carré et non son contenu.

Maintenant que nous avons une ancre carrée, vous pouvez utiliser n’importe laquelle des astuces d’alignement vertical pour centrer le contenu. Dans cet exemple, j’ai utilisé l’astuce absolute + translate:

body {
  margin: 0px;
  width: 100%;
}
main {
  display:flex; 
  flex-wrap:wrap;
}
.flex-container {
  width: 100%;
}
ul {
  display: flex;
  flex-wrap:wrap;
  list-style: none;
  -webkit-padding-start:0px;
  -webkit-margin-before: 0px;
  -webkit-margin-after: 0px;
}
li {
  display: flex;
  flex-direction: column;
  width: 50%;
}
.red {
  background-color: red;
}
.white {
  background-color: white;
}

/* edited code */
.tile {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.click-container {
  display: block;
  text-align: center;
  position: relative;
}
.click-container:before{
  float: left;
  padding-top: 100%;
  content: "";
}
<body>    
  <main>
    <div class="flex-container">
      <ul>
        <li class="red">
          <a class="click-container" href="/">
            <div class="tile">
              Text
            </div>
          </a>
        </li>
      </ul>
    </div>
  </main>
</body>

0
AVAVT

Changez votre CSS comme suit:

    .tile:before {
        content: '';
        float: left;
    }
    .tile {
        text-align: center;
        padding-top: 50%;
        padding-bottom: 50%;
    }

Vous ne perdrez pas votre forme carrée et le remplissage sera toujours centré sur le texte.

Vous pouvez le voir ici:

https://plnkr.co/edit/BgPW9exwJpyxHFn5fMBP?p=preview

0
FioleNana