利用table-cell实现元素居中对齐
vertical-align对一些特定显示样式(例如单元格显示方式:table-cell)的元素才会起作用。所以要实现上下垂直居中对齐,可以采用如下样式
display:table-cell; /*按照单元格的样式显示元素*/
vertical-align:middle; /*垂直居中对齐*/
-
上面的设置方式相比设置line-height属性,可以兼容文字有多行的情形。
下面举例说明:
vertical-align对一些特定显示样式(例如单元格显示方式:table-cell)的元素才会起作用。所以要实现上下垂直居中对齐,可以采用如下样式
display:table-cell; /*按照单元格的样式显示元素*/
vertical-align:middle; /*垂直居中对齐*/
上面的设置方式相比设置line-height属性,可以兼容文字有多行的情形。
下面举例说明:
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步