如何使用 CSS 在 DIV 中垂直居中对齐文本 | 您所在的位置:网站首页 › ai中文本框中的字如何居中 › 如何使用 CSS 在 DIV 中垂直居中对齐文本 |
如何使用 CSS 在 DIV 元素中垂直居中对齐文本
主题:HTML / CSS 答案:使用 CSS line-height 属性如果您尝试使用 CSS 规则 vertical-align: middle; 将 div 内的文本垂直居中对齐,您将不会成功。 假设您有一个高度为 50px 的 div 元素,并且您在 div 内放置了一些要垂直居中对齐的链接。 最简单的方法是 — 只需应用值等于 div 高度的 line-height 属性,即 50px。 这个技巧背后的概念是,如果一个元素的 line-height 属性的值大于 font-size 的值,则差异(称为"领先")被削减一半并均匀分布 在内联框的顶部和底部,将内联元素与元素垂直居中对齐。 让我们试试下面的例子来了解它的实际工作原理: 示例 使用 CSS 垂直居中文本 .menu{ height: 20px; line-height: 20px; padding: 15px; border: 1px solid #666; } Home | About Us | Contact FAQ 相关问题解答以下是与此主题相关的更多常见问题解答: 如何使用 CSS 将文本放置在图像上 如何使用 CSS 在鼠标悬停时为文本颜色设置动画 如何使用 CSS 创建首字下沉效果 |
CopyRight 2018-2019 实验室设备网 版权所有 |