关于行内元素垂直居中的一个小小trick
在保持父元素具体数值宽度不变且有不止一行时,可以使用一点小tricks,比如
#outer{ text-align: center; height: 200px; width: 300px; } #outer::before{ content: " "; height: 100%; width: 1%; display: inline-block; vertical-align: middle; } /*html代码如下*/ <div id="outer"> <span>span1</span> <span>span2</span> </div>
但是,注意:因为vertical-align是指行内元素的基线相对于该元素所在行的基线的垂直对齐方式,所以该方法只对行内元素有效
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步