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

最新推荐文章于 2023-08-13 00:34:20 发布

雪上

最新推荐文章于 2023-08-13 00:34:20 发布

阅读量2.6k

点赞数 1

分类专栏： wed 文章标签：表格 div ul li 垂直水平居中

本文链接：https://blog.csdn.net/xueshanghon_L/article/details/50978187

版权

在项目中遇到使用div、ul和li构建表格的挑战，难点在于如何实现内容的垂直和水平居中。通过在li内添加标签并利用CSS属性vertical-align: middle;配合JS动态调整p元素宽度，成功解决了定高表格内容的垂直和水平居中问题。

摘要由CSDN通过智能技术生成

近日做项目，遇到一个难题：就是用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;

最低0.47元/天解锁文章

雪上

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
2
评论
div表格定高垂直居中，水平居中

近日做项目，遇到一个难题：就是用div ul li 做表格时，要不就是水平居中不了，要不是垂直居中不来垂直居中用vertical-align: middle;，但是浮动把它给无效化了因为定高，所以用不了行高如何解决垂直居中呢？就是在li里面加一个标签 ul li{ list-style-type: none; }
复制链接

扫一扫

专栏目录