a 标签属于行内元素, 默认情况下是不支持设置宽高的, 仅依靠内容来 "撑大自己". 这时我们需要用 CSS 的 display 属性并且值设置为 block 即可. 这么设置浏览器就会将被设置的 a 标签识别为块元素. 这时宽高的设置参数就有效了.
a 标签的文字垂直居中很简单, 只需要设置 CSS 的 line-height 属性即可, 将像素值设置的和高度一致就是垂直居中了.
(相关课程推荐: CSS 视频教程 https://www.html.cn/css/ )
下面举例说明:
CSS:
- a{
- display: block; /* 设置为块元素 */
- width: 300px;
- height: 100px;
- line-height: 100px; /* 设置垂直居中 */
- text-align: center;
- border: 1px solid #ccc;
- }
HTML:
<a href="#"> 我是 A 标签的内容 </a>
运行结果:
未使用 CSS: 宽高是依靠内容来决定.
使用 CSS 后: 宽高是依靠 CSS 属性来决定.
本文来自 CSS 答疑 https://www.html.cn/qa/css3/ 栏目, 欢迎学习!
来源: http://www.css88.com/qa/css3/14773.html