css单行文字垂直居中的代码

2022年6月10日14:37:13

单行文字垂直居中的代码

CSS 没有给我们提供文字垂直居中的代码. 这里我们可以使用一个小技巧来实现.

解决方案: 让文字的行高等于盒子的高度 就可以让文字在当前盒子内垂直居中

css单行文字垂直居中的代码

<!DOCTYPEhtml><htmllang="ZH-CN"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Document</title><style>/* 1.把a转换为块级元素 */a{display: block;width: 230px;height: 40px;background-color: #55585a;text-decoration: none;font-size: 14;color: #fff;text-indent: 2em;line-height: 40px;}/* 2. 鼠标经过链接转换背景颜色 */a:hover{background-color: #ff6700;}</style></head><body><ahref="#">手机 电话卡</a><ahref="#">电视 盒子</a><ahref="#">笔记本 平板</a><ahref="#">出行 穿戴</a><ahref="#">智能 路由器</a><ahref="#">健康 儿童</a><ahref="#">耳机 音响</a></body></html>

css单行文字垂直居中的代码
css单行文字垂直居中的代码

  • 作者：yangbocsu
  • 原文链接：https://yangbocsu.blog.csdn.net/article/details/120020694
    更新时间：2022年6月10日14:37:13 ，共 671 字。