利用table-cell实现元素居中对齐
2024-08-25 11:47:25
vertical-align对一些特定显示样式（例如单元格显示方式：table-cell）的元素才会起作用。所以要实现上下垂直居中对齐，可以采用如下样式
display:table-cell; /*按照单元格的样式显示元素*/
vertical-align:middle; /*垂直居中对齐*/
上面的设置方式相比设置line-height属性，可以兼容文字有多行的情形。
下面举例说明：
创建Html元素
<div>
<span>测试测试，即便是多行，我也还是垂直居中对齐的。</span>
</div>设置css样式
div{ width:200px; height:115px; border:4px solid #ebcbbe; display:table-cell;vertical-align: middle;观察显示效果
最新文章
- Java——搭建自己的RESTful API服务器（SpringBoot、Groovy）
- Jni ：三维数组处理方法 ，以整形三维数组为例 C++实现
- Weblogic页面应用查询oracle数据库后台报错或页面日期格式显示错误
- ASP.NET WebAPI 08 Message,HttpConfiguration,DependencyResolver
- C#系统委托之Action And Func
- 复杂表格的树形结构的添加删除行div实现
- Apache Options Indexes FollowSymLinks具体解释
- 请帮我看看这个页面，红色部份如何改才能保存到ACCess数据库中
- 【转】10 个迅速提升你 Git 水平的提示
- 为什么Lisp语言如此先进？（译文） - 阮一峰的网络日志
- Slow HTTP Denial of Service Attack 漏洞解决
- 理解python的元类
- javascript第一个作业之网页计算器
- 南阳325----zb的生日
- flask自定义处理错误方法
- Categories  VS Extensions (分类 vs 扩展)
- VS Code折腾记 - (2) 快捷键大全，没有更全
- LeetCode 700 Search in a Binary Search Tree 解题报告
- [LeetCode] 884. Uncommon Words from Two Sentences_Easy tag: Hash Table
- import模块