css 垂直居中
1. line-height :单行文字垂直居中
适用于 按钮 下拉框 导航 原理是将单行文字的行高设定后,文字会位于行高的垂直中间位置.
2.line-height + inline-block 多对象多个元素或多行元素的垂直居中
将多个元素或多行元素当成一个行元素来看待,需要将这些数据多包一层,并将其设定为inline-block, 并在该inline-block对象的外层使用inline-block来代替height的设置,
<style>
.box{ width:500px; border:1px solid #f00; margin:auto; line-height:200px; text-align:center; } .box .content{ display:inline-block; height:auto; line-height:1; width:400px; background:#ccc; } </style> <div class="box "> <div class="content"> aaaaaaaaaa<a href="">bbbbbbbbbbbbbb</a> cccccccccccccccccc </div> </div>
3.:befor + inline-block 多对象的css垂直居中
:before伪类元素+inline-block 属性的写法好处在于子元素居中可以不需要特别设定高度,将:before伪类元素设定为100%高的inline-block,再搭配上将需要剧中的子元素同样设置成inline-block性质,就能使用vertical-align:minddle达到垂直居中
常常因为自己的无知而感到惶恐.
---Jun.
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步