您的位置：首页 > 其它

div表格定高垂直居中，水平居中

2016-03-25 12:14 357 查看

近日做项目，遇到一个难题：就是用div ul li 做表格时，要不就是水平居中不了，要不是垂直居中不来

垂直居中用vertical-align: middle;，但是浮动把它给无效化了

因为定高，所以用不了行高

如何解决垂直居中呢？

就是在li里面加一个标签

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
<script src="js/jquery-1.7.2.min.js" type="text/javascript" charset="utf-8"></script>
<title></title>
</head>
<body>
<style type="text/css">
ul li{
list-style-type: none;
}
*{
margin: 0px;
padding: 0px;
}
ul{
width: 99%;
height: 100px;
border: solid 1px red;
}
li{
float: left;
text-align: center;
width: 100%;
}
p{
height: 100px;
vertical-align: middle;	/*垂直居中*/
display: table-cell;	/*表格化*/
word-break: break-all;	/*文字长度达到盒子的宽度后强制换行*/
}
</style>
<div style="width: 100%;">
<ul>
<li><p>郑玄在马融门下，三年不得相见，高足弟子传授而已。尝算浑天不合，诸弟子莫能解。</p></li>
</ul>
<ul>
<li><p>《文学》</p></li>
</ul>
</div>
</body>
</html>

垂直居中解决了，那么你有没有看到

text-align: center;

不起作用了？

是的，因为

display: table-cell;

把P的

display: block;

给弄掉了，相当于

display: inline;

下图可以看到，p的宽度，其实

text-align: center;

并没有失效，只是宽度太小

那么要如何去弄呢？

我想，如果我把P的宽度跟随li的宽度变化而变化，那是不是解决水平居中的问题了呢？

我就想到用JS解决

$(function(){
var a=$(".liwidth").innerWidth();
$("li p").css("width",a);
});

嗯︿(￣︶￣)︿，解决了，美中不足的是比如：你浏览器宽度是1000px，那么你打开这页面，它是居中的，如果你不刷新，把浏览器宽度拉伸到1001以上，那么恭喜你，它并不居中[无奈]╮(╯-╰)╭ ，拉伸到1000以下是居中的。刷新一下，它就适应了

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
<script src="js/jquery-1.7.2.min.js" type="text/javascript" charset="utf-8"></script>
<title></title>
</head>
<body>
<script type="text/javascript">
//控制 p标签跟随li的宽度变化而变化
$(function(){
var a=$(".liwidth").innerWidth();
$("li p").css("width",a);
});
</script>
<style type="text/css">
ul li{
list-style-type: none;
}
*{
margin: 0px;
padding: 0px;
}
ul{
width: 99%;
height: 100px;
border: solid 1px red;
}
li{
float: left;
text-align: center;
width: 100%;
}
p{
height: 100px;
display: inline;
vertical-align: middle;	/*垂直居中*/
display: table-cell;	/*表格化*/
word-break: break-all;	/*文字长度达到盒子的宽度后强制换行*/
}
</style>
<div style="width: 100%;">
<ul>
<li class="liwidth"><p>郑玄在马融门下，三年不得相见，高足弟子传授而已。尝算浑天不合，诸弟子莫能解。</p></li>
</ul>
<ul>
<li><p>《文学》</p></li>
</ul>
</div>
</body>
</html>

完！

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： 表格 div ul li 垂直水平居中

相关文章推荐

新的分享

章节导航