没有合适的资源?快使用搜索试试~ 我知道了~
详解HTML中字体使用line-height依然不能垂直居中解决办法
0 下载量 128 浏览量
2020-11-19
11:52:56
上传
评论
收藏 31KB PDF 举报
温馨提示
试读
1页
以图片所示的效果为例,显然我们不仅要使“下一步”文本水平居中,还要垂直居中,此时我们写代码如下:
资源推荐
资源详情
资源评论
详解详解HTML中字体使用中字体使用line-height依然不能垂直居中解决办法依然不能垂直居中解决办法
以 图片所示的效果为例,显然我们不仅要使“下一步”文本水平
居中,还要垂直居中,此时我们写代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#next-button{
height: 54px;
text-align: center;
color: #fff;
background: #e2231a;
line-height: 54px;
font:16px "Microsoft YaHei","Hiragino Sans GB";
cursor: pointer;
margin: 0 auto;
width:400px;
}
</style>
</head>
<body>
<div id="next-button">下一步</div>
</body>
</html>
在其中,我们设置了宽度、高度、背景颜色、字体以及水平与垂直居中,然而,我们却得到了这样的效果:
我们设置的文本垂直居中并没有效果。而我们改代码为
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#next-button{
width:400px;
height: 54px;
text-align: center;
color: #fff;
background: #e2231a;
font:16px/54px "Microsoft YaHei","Hiragino Sans GB";
cursor: pointer;
margin: 0 auto;
}
</style>
</head>
<body>
<div id="next-button">下一步</div>
</body>
</html>
的时候,就可以垂直居中。原因就在于如果样式声明列表中有line-height与font,则line-height无效,必须与font一起使用。只
要样式声明中没有font,就可使用line-height来设置文本的垂直居中了。
资源评论
weixin_38637144
- 粉丝: 4
- 资源: 925
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
最新资源
- 学生成绩管理系统-C++版本
- 吉林大学离散数学2笔记.pdf
- 通道处理过程的模拟通常涉及对通道处理机制的理解与实现.txt
- Flume进阶-自定义拦截器jar包
- Dubins曲线算法讲解和在运动规划中的使用.pdf
- 上市公司-股票性质数据-工具变量(民企、国企、央企)2003-2022年.dta
- 上市公司-股票性质数据-工具变量(民企、国企、央企)2003-2022年.xlsx
- Reeds+Shepp曲线算法讲解和实现.pdf
- 毕业设计基于SpringBoot+MyBatisPlus+MySQL+Vue的外卖配送信息系统源代码+数据库
- 词向量(Word Embeddings)是自然语言处理(NLP)领域的一种重要技术.txt
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功