纯css实现不固定行数的文本在一个容器内垂直居中
项目中要实现的效果如图:
html代码 及 css代码:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> .box { display: inline-block; width: 200px; height: 68px; line-height: 68px; border: 1px solid #ddd; vertical-align: top; padding: 0 20px; } h5 { display: inline-block; line-height: 28px; vertical-align: middle; margin: 0; } </style> </head> <body> <div class="box"> <h5>标题</h5> </div> <div class="box"> <h5>标题标题标题标题标题标题标题标题标题</h5> </div> </body> </html>
上面代码最终实现的效果比较粗糙:
前端菜鸟一枚,习惯记录平时遇到的一些问题和学习笔记,觉得有用的可以点个支持!有问题的也可以加QQ814878176交流哟 : )