css - 使用 flexbox 使文本居中对齐
问题描述
.lol1 {
display: flex;
justify-content: center;
}
.none {
width: 200px;
background-color: lightgreen;
height: 80px;
margin: 3px;
border-radius: 10px;
line-height: 1em;
}
.none a {
text-align: center;
text-decoration: none;
color: red;
}
<div class="lol1">
<div class="none"><a href="#">A</a></div>
<div class="none"><a href="#">B</a></div>
<div class="none"><a href="#">C</a></div>
<div class="none"><a href="#">D</a></div>
</div>
解决方案
将这 3 个属性添加到.none
display: flex;
align-items: center;
justify-content: center;
justify-content: center
将它水平对齐到中心,align-items: center
并将它垂直对齐。
.lol1 {
display: flex;
justify-content: center;
}
.none {
width: 200px;
background-color: lightgreen;
height: 80px;
margin: 3px;
border-radius: 10px;
line-height: 1em;
display: flex;
align-items: center;
justify-content: center;
}
.none a {
text-align: center;
text-decoration: none;
color: red;
}
<div class="lol1">
<div class="none"><a href="#">A</a></div>
<div class="none"><a href="#">B</a></div>
<div class="none"><a href="#">C</a></div>
<div class="none"><a href="#">D</a></div>
</div>
另一种解决方案是贴上margin: auto
标签a
。
.none
需要display: flex
工作。
.lol1 {
display: flex;
justify-content: center;
}
.none {
width: 200px;
background-color: lightgreen;
height: 80px;
margin: 3px;
border-radius: 10px;
line-height: 1em;
display: flex;
}
.none a {
margin: auto;
text-align: center;
text-decoration: none;
color: red;
}
<div class="lol1">
<div class="none"><a href="#">A</a></div>
<div class="none"><a href="#">B</a></div>
<div class="none"><a href="#">C</a></div>
<div class="none"><a href="#">D</a></div>
</div>
推荐阅读
- javascript - 文件选择完成后奇怪的文件名回调
- node.js - 我在使用 history.Push() 重定向组件时遇到路由问题
- webforms - vb.net 中的 oncheckchanged 问题
- python - 我的我的世界机器人 discord.py 中的错误。键错误
- python - 如何将 Json 转换为 Python 对象?
- python - PyDev 没有出现在 Eclipse 4.19 中
- php - 在 Ubuntu Linux 安装上我应该有多少 wp-config.php 文件?
- botframework - 使用 Microsoft Bot 框架 Composer 管理长时间运行的操作
- itext - iTextSharp5:使用默认应用程序按文件类型打开任意文件
- etl - Nifi:计算当前运行的流文件中的行数,并检查计数是否> =上一次运行的流文件中的行数