web-dev-qa-db-ja.com

Flexbox-テキストを垂直方向に中央揃え

正方形のフレックスボックスがあり、1つのハイパーリンクで完全に覆われています。

次に、フレックスボックスのコンテンツを垂直方向に中央揃えにします。

ただし、div要素をプロパティdisplay: tableで使用し、ネストされたdivをプロパティdisplay: table-cell; vertical-align: middleで使用しても、正方形の形状が失われるため機能しません。

divとulの代わりにlisを使用すると、どこでもクリックできるという特性が失われます。

「テキスト」を赤いボックスの水平方向と垂直方向の中央に揃えたい：

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>
htmlcssflexboxcentering
10
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>
17
Michael_B

.tile宣言では、flexboxコードが次のように必要です。

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

flexboxプロパティを使用していないため、LI宣言はdisplay：blockである必要があります。

2
Zack Kirby

:beforeの.tileの部分を削除して、aタグ（現在はクラス化されたclick-container）に移動しました。 。a要素自体は、その内容ではなく正方形にする必要があります。

四角いアンカーができたので、任意の垂直配置のトリックを使用してコンテンツを中央に配置できます。この例では、絶対+変換のトリックを使用しました。

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

次のようにCSSを変更します。

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

四角形が失われることはなく、パディングは常にテキストの中央に配置されます。

あなたはそれをここでチェックすることができます：

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

0
Fiole