webentwicklung-frage-antwort-db.com.de

Flexbox - zentriert den Text vertikal

Ich habe eine quadratische Flexbox, die vollständig mit einem Hyperlink abgedeckt ist. 

Nun möchte ich den Inhalt der Flexbox vertikal zentrieren.

Die Verwendung eines div-Elements mit der Eigenschaft display: table und einer verschachtelten div mit der Eigenschaft display: table-cell; vertical-align: middle funktioniert jedoch nicht, da ich die quadratische Form verliere.

Wenn ich divs anstelle von ul und li verwende, verliere ich die Eigenschaft, überall klicken zu können.

Ich möchte, dass "Text" in der horizontalen und vertikalen Mitte der roten Box ausgerichtet wird:

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

In Ihrer .tile-Deklaration benötigen Sie den Flexbox-Code wie folgt:

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

Ihre LI-Deklaration sollte nur angezeigt werden: blockieren, da sie die Flexbox-Eigenschaften nicht verwendet.

2
Zack Kirby

Ich habe den :before-Teil von .tile entfernt und in den a-Tag verschoben (jetzt class-ed click-container. Da er sich nicht anfühlt, wo er sich befinden soll. Sie möchten, dass das a-Element selbst quadratisch ist, nicht der Inhalt.

Da wir nun einen quadratischen Anker haben, können Sie den Inhalt mit Hilfe der vertikalen Ausrichtungs-Tricks zentrieren. In diesem Beispiel habe ich den absoluten Umsetzungs-Trick verwendet:

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

Ändern Sie Ihr CSS wie folgt:

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

Sie verlieren Ihre quadratische Form nicht und der Abstand wird durch die Auffüllung immer zentriert.

Sie können es hier überprüfen:

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

0
FioleNana