flex布局文字居中对齐
文章描述：
在网页里面使用felx布局简单、便捷、好用，flex布局如何使文字居中对齐显示
html
<div class="innner">垂直居中示例</div>
<div class="innner2">垂直水平居中示例</div>
<div class="innner3">水平居中示例</div>style
.innner {
display: flex;
background-color: #ea4d22;
height: 100px;
/* line-height: 100px; */
/* text-align: center; */
justify-content: center;
flex-direction: column;
}
.innner2 {
display: flex;
background-color: #18a0c2;
height: 100px;
/* line-height: 100px; */
text-align: center;
justify-content: center;
flex-direction: column;
}
.innner3 {
background-color: #20e64b;
height: 100px;
text-align: center;
}
文字和模块对齐方式
html
<div class="div">
已有<span></span>人成功办理
</div>style
.div{
font-size: 18px;
color: #ff8702;
padding: 10px 0;
text-align: center;
font-weight: 800;
letter-spacing: 3px;
display: flex;
align-items: center;
justify-content: center;
}
.div span {
width: 82px;
height: 32px;
background: #ff8702;
display: inline-block;
border-radius: 10px;
margin-left: 5px;
margin-right: 5px;
}
发布时间：2022/05/27
发表评论