css - 垂直居中问题
本文介绍了css - 垂直居中问题的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
html{
margin: 0;
padding: 0;
}
div{
height: 200px;
width: 300px;
border: 1px solid #333;
}
ul{
overflow: hidden;
}
h4 {
font-size: 12px;
line-height: 20px;
width: 80%;
height: 60px;
border: 1px solid #000;
overflow : hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
</style>
</head>
<body>
<div>
<ul>
<h4>
来喀什死了个框架送给大家感受感受是孤家估计睡来喀什死了个框架送给大家感受感受是孤家估计睡来喀什死了个框架送给大家感受感受是孤家估计睡
</h4>
</ul>
</div>
</body>
</html>当h4拿到的内容只有一行时候 怎么垂直居中呢？
display: table-cell;
vertical-align: middle;
这个和display: -webkit-box;冲突了 求解
解决方案
<div class="wrap">
<div class="content">试一下这个一行文字</div>
</div>
.wrap {
width:80%;
height: 60px;
border: 1px solid #000;
display: -webkit-box;
-webkit-box-align: center
}
.content{
font-size: 12px;
line-height: 20px;
width: 100%;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}这篇关于css - 垂直居中问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
