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

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

半热

最新推荐文章于 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`进行元素垂直居中时，遇到外边距失效的问题。作者作为一个前端新手，在实践中发现添加外边距无效，并提出了通过其他垂直居中方法，如Flexbox或Grid来替代的解决方案。

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

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>

在这里插入图片描述
可以使用别的垂直居中的方法例如：
css：

.test{
	height: 200px;
	display: flex;
	align-items: center;
	background-color: skyblue;
	margin-bottom: 20px;
}

在这里插入图片描述
当然方法有很多要看个人喜好和实际情况。

最低0.47元/天解锁文章

半热

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

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

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

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