gpt4 book ai didi

html - Flexbox - 垂直居中文本

转载 作者:太空狗 更新时间:2023-10-29 13:39:21 24 4
gpt4 key购买 nike

<分区>

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

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

但是,使用具有属性 display: tablediv 元素和具有 display: table- 属性的嵌套 div细胞; vertical-align: middle 不起作用,因为我丢失了正方形。

如果我使用 divs 而不是 ulli,我将失去能够在任何地方点击的特性。

我希望“文本”在红框的水平和垂直中心对齐:

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>

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com