本文介绍了前端开发中的盒子模型，重点讲解了文本在盒子中水平和垂直居中的两种方法，包括line-height和vertical-align属性的使用，并强调了vertical-align的限制。此外，还详细阐述了外边距合并的概念，解释了为何在布局时可能会出现外边距合并的现象，帮助开发者理解并解决相关问题。
今天要记录的有两点：
- 盒子模型文本元素在盒子中的居中问题
- 外边距合并（隐藏知识点）
在做盒子模型的实验中，发现使用text-align将元素文本在水平方向上居中外，还忽略了一点，在垂直方向上居中，达到我们想要的效果，整理了一番后发现有两种方式：
1、使用line-height 属性手动调节
（将元素的line-height设置与height相同的高度，
适用于只占一行的文本，若是多行字符只显示一行）
2、使用vertical-align 属性设值为 middle
过程中也发现，在使用第2种方式的vertical-align 时要注意的一点是：
此属性必须使用在table-cell & inline 的元素中（不可使用在块状元素上）所以在面对块状元素是需要有一个diaplay来转换。
【番外：vertical-align 的其他用法】
最低0.47元/天 解锁文章
扫一扫
606
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
