Question

我有一个方形的flexbox，完全覆盖了一个超链接。

现在我想垂直居中Flexbox的内容。

但是，使用带有属性div的{{1}}元素和带有属性display: table的嵌套div不起作用，因为我丢失了方形形状。

如果我使用display: table-cell; vertical-align: middle而不是div和ul，我将无法在任何地方点击。

我想＆＃34; Text＆＃34;要在红色框的水平和垂直中心对齐：

＆＃13;

li

＆＃13;

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;
}

＆＃13;

Answer 1

＆＃13;

main {
  height: 200px;
  width: 200px;
}
a {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: red;
  height: 100%;
}

＆＃13;

<main>
  <a href="/">
    <div class="tile">Text</div>
  </a>
</main>

＆＃13;

Answer 2

在你的扩展中，你需要如下的flexbox代码：

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

You LI声明应该只显示：block，因为它没有使用flexbox属性。

Answer 3

按照以下方式更改CSS：

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

您不会丢失方形，填充将始终以文本为中心。

你可以在这里查看：

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

Answer 4

我删除了:before的{{1}}部分，并将其移至.tile标记（现在已归类为a。因为它不感觉像它应该在哪里。你希望click-container元素本身是正方形，而不是它的内容。

既然我们有一个方形锚点，你可以使用任何垂直对齐技巧来集中内容，在这个例子中我使用了绝对+翻译技巧：

＆＃13;

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: "";
}

＆＃13;

Flexbox - 垂直居中文本

4 个答案: