Flexbox - 垂直居中文本[重复]
Posted
技术标签:
【中文标题】Flexbox - 垂直居中文本[重复]【英文标题】:Flexbox - center text vertically [duplicate] 【发布时间】:2017-06-15 20:12:26 【问题描述】:我有一个方形的弹性盒子,它被一个超链接完全覆盖。
现在我想将弹性框的内容垂直居中。
但是,使用属性为display: table
的div
元素和属性为display: table-cell; vertical-align: middle
的嵌套div
不起作用,因为我失去了正方形。
如果我使用div
s 而不是ul
和li
,我将失去能够在任何地方点击的属性。
我希望“文本”在红色框的水平和垂直中心对齐:
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项目覆盖整个高度,并使其内容居中。 【参考方案1】: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,感谢您的信息,但这种做法已经过时了。对于 html5,锚元素 (a
) 中的 div
元素是完全有效且可接受的做法。用更专业的术语来说,锚元素可以包含 flow 和 phrasing 内容。 Divs 代表流内容。 developer.mozilla.org/en-US/docs/Web/HTML/Element/a#Properties
好吧,我不知道已经改变了谢谢【参考方案2】:
在您的 .tile 声明中,您需要 flexbox 代码如下:
justify-content: center;
display: flex;
align-items: center;
你的 LI 声明应该只是 display:block 因为它没有使用 flexbox 属性。
【讨论】:
【参考方案3】:按如下方式更改您的 CSS:
.tile:before
content: '';
float: left;
.tile
text-align: center;
padding-top: 50%;
padding-bottom: 50%;
你不会失去你的方形,并且填充将始终居中文本。
你可以在这里查看:
https://plnkr.co/edit/BgPW9exwJpyxHFn5fMBP?p=preview
【讨论】:
【参考方案4】:我删除了.tile
的:before
部分,并将其移至a
标记(现在已分类click-container
。因为它感觉不应该在哪里。你想要@987654325 @ 元素本身是方形的,而不是它的内容。
现在我们有了一个方形锚点,你可以使用任何垂直对齐技巧来使内容居中,在这个例子中我使用了绝对+翻译技巧:
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>
【讨论】:
以上是关于Flexbox - 垂直居中文本[重复]的主要内容,如果未能解决你的问题,请参考以下文章