纯css实现不固定行数的文本在一个容器内垂直居中
Posted 会飞的小蜜蜂
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了纯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>
上面代码最终实现的效果比较粗糙：
以上是关于纯css实现不固定行数的文本在一个容器内垂直居中的主要内容，如果未能解决你的问题，请参考以下文章