CSS如何让单行文字垂直居中
🌟 所属专栏:前端只因变凤凰之路
🐔 作者简介:rchjr——五带信管菜只因一枚
😮 前言:该系列将持续更新前端的相关学习笔记,欢迎和我一样的小白订阅,一起学习共同进步~
👉 文章简介:本文介绍CSS如何让单行文字垂直居中。知识学习内容来自b站的 @黑马程序员 的视频
先看一个案例了解什么是单行文字垂直居中
如上图,健康 儿童二字在一行中的高度很明显是贴到顶部了,而我们想要的效果应该是这样
那么具体该如何实现上述效果呢?其实方法很简单,只需要将行高等于它所在的盒子高度即可。当然这里我们使用了元素显示的转换,即让a标签转换为块元素而不是行内元素。下面给出前后对比的代码
第一种代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 1 把链接a转换为块元素 */
a {
display: block;
width: 230px;
height: 40px;
text-decoration: none;
color: white;
background-color: #55585a;
text-indent: 2em;
font-size: 14px;
/* line-height: 40px; */
}
a:hover {
background-color: #ff6700;
}
</style>
</head>
<body>
<a href="#">手机 电话卡</a>
<a href="#">电视 盒子</a>
<a href="#">笔记本 平板</a>
<a href="#">出行 穿戴</a>
<a href="#">智能 路由器</a>
<a href="#">健康 儿童</a>
<a href="#">耳机音响</a>
</body>
</html>
第二种代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 1 把链接a转换为块元素 */
a {
display: block;
width: 230px;
height: 40px;
text-decoration: none;
color: white;
background-color: #55585a;
text-indent: 2em;
font-size: 14px;
line-height: 40px;
}
a:hover {
background-color: #ff6700;
}
</style>
</head>
<body>
<a href="#">手机 电话卡</a>
<a href="#">电视 盒子</a>
<a href="#">笔记本 平板</a>
<a href="#">出行 穿戴</a>
<a href="#">智能 路由器</a>
<a href="#">健康 儿童</a>
<a href="#">耳机音响</a>
</body>
</html>
以上就是如何让单行文字垂直居中的小技巧啦~
jkSmiths: 博主B站视频链接失效了,能不能再发一下
诺坎普的风间: 打标签的命令有错误,应该是: git tag -a v1.0.0 -m "Release version v1.0.0" git push origin v1.0.0
zzp28218: 这个网站现在稳定版更新到127.0.6533.119,想看其他版本的下载链接应该如何做呢?我目前的做法是找自己的谷歌版本,然后将他下载链接中的版本号修改,然后去一个一个试
messi_wq: vue3怎么会有this呢,vue3 this要换什么写法呢?
S903784597: 如何使用selenium定位到B站的评论区,B站目前的评论块使用的是自定义的元素块,不再是div之类的了