table-cell垂直居中外边距失效

最新推荐文章于 2023-03-22 11:36:11 发布

VIP文章半热

最新推荐文章于 2023-03-22 11:36:11 发布

阅读量1.5k

点赞数

分类专栏： css随笔文章标签： table-cell 垂直居中外边距失效

本文链接：https://blog.csdn.net/nidayeya/article/details/90645241

版权

css display:table-cell; vertical-align:middle;垂直居中外边距失效

第一次写刚接触前端的小白
做练习时用到了此垂直居中方式，当给元素加外边距时出现问题：
html:

<body>
	<div class="test">
			<p>此处内容为医生团队简述。北京科尔口腔门诊部共有专业牙科医生 0000名......为专业口腔连锁机构，传媒大学部成立于 2001 年，秉承呢个“科学为基础，艺术为结晶”的宗旨，以为传媒大学众多知名教授及广播电视主持人、演艺界人士、多国留学生提供过高质量的医疗服务。</p>
		</div>
	    <div class="test2"></div>
</body>

css:

<style type="text/css">
.test{
	height: 200px;
	display: table-cell;
	vertical-align: middle;
	background-color: skyblue;
	margin-bottom: 20px;
}
.test2{
    height:100px;
    background-color: black;
}
</style>

最低0.47元/天解锁文章

优惠劵

半热

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
table-cell垂直居中外边距失效

css display:table-cell; vertical-align:middle;垂直居中外边距失效第一次写刚接触前端的小白做练习时用到了此垂直居中方式，当给元素加外边距时出现问题：html:<body> <div class="test"> <p>此处内容为医生团队简述。北京科尔口腔门诊部共有专业牙科医生 0000名.........
复制链接

扫一扫