项目中要实现的效果如图:
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实现不固定行数的文本在一个容器内垂直居中
原文地址:https://www.cnblogs.com/stella1024/p/8902333.html