logo标签列表

Flexbox - 垂直居中文本

htmlcssflexboxcentering
13

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

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

然而，使用具有属性display：table和嵌套display: table-cell; vertical-align: middle属性的div元素不起作用，因为我失去了方形形状。

如果我使用div而不是ul和li，我就失去了随处可点击的属性。

我希望“Text”在红色框的水平和垂直中心对齐：

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>

移除多余的div，将链接本身作为flex项目覆盖整个高度，并使其内容居中。 - CBroe
4个回答
23

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>

div 应该改为 span，因为在内嵌块级元素（div）到行内元素（a）中并不是一个好的实践。 - AndrewBrntt
1
@AndrewBrntt，感谢您的留言，但那种做法已经过时了。使用HTML5，将div元素放在锚点元素(a)内是完全有效和可接受的做法。更技术性地说，锚点元素允许包含流动和短语内容。Divs代表流内容。https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#Properties - Michael Benjamin
1
太好了，我不知道那个已经改变了，谢谢。 - AndrewBrntt
3

在您的.tile声明中，您需要以下flexbox代码：

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

您的LI声明只需要设置为display:block，因为它没有使用flexbox属性。
0

我移除了 .tile 中的 :before 部分，并将其移到了 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

将您的CSS更改如下：

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

您不会失去正方形的形状，填充将始终使文本居中。

您可以在此处查看：

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

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接