css行高:line-height属性详解(5)
作者:ddcatlee 来源:猫沙盆 时间:2008-06-24 11:42:00
7.3.5 应用:单行文字在垂直方向居中
在网页设计中,往往为了突出标题而添加背景图案,如图7-31所示。
图7-31 包含背景图片的标题
假设此标题的XHTML代码如下:
<div id=”#sample”> <h2>热门帖大盘点</h2> ……</div>
此时如果只设定<h2>的背景图片和高,则文字会偏上,如图7-32所示。
图7-32 未设定行高的标题文字
针对这个现象,一般只需要设定与高度相等的行高即可,相关代码如下:
#sample h2 { height : 31px; line-height : 31px; …… }
此时在浏览器内文字已经在垂直位置上居中显示,如图7-33所示。
图7-33 设定行高后的标题文字
此方法同样可以运用在其他需要文字垂直居中显示的地方,例如列表项、导航条等等。
标签:line-height,行高,文字,css
0
投稿
猜你喜欢
用python监控服务器的cpu,磁盘空间,内存,超过邮件报警
2023-04-22 07:13:38
Python判断变量名是否合法的方法示例
2022-07-31 19:05:12
Python中的变量及简单数据类型应用
2021-06-13 09:45:26
Django 多语言教程的实现(i18n)
2022-12-18 22:41:39
记一次MySQL的优化案例
2024-01-14 21:32:58
pytorch安装及环境配置的完整过程
2023-06-19 23:53:20
最新idea2021注册码永久激活(激活到2100年)
2023-06-21 01:42:42
PyQt5爬取12306车票信息程序的实现
2023-05-18 05:03:08
Python如何使用argparse模块处理命令行参数
2023-02-03 18:10:20
python+selenium 点击单选框-radio的实现方法
2023-07-11 01:51:54
Python中def()函数的实战练习题
2023-02-13 02:04:54
Tensorflow 2.4 搭建单层和多层 Bi-LSTM 模型
2021-03-30 16:25:06
python使用Pycharm创建一个Django项目
2023-11-01 22:33:13
Vue iframe更改src后页面未刷新问题解决方法
2024-05-09 15:14:15
python聚类算法选择方法实例
2023-12-01 13:51:11
Go使用Gin+mysql实现增删改查的详细实例
2024-01-20 20:38:43
如何使用Python的Requests包实现模拟登陆
2022-10-07 03:12:26
Windows下MySQL 5.6安装及配置详细图解(大图版)
2024-01-24 06:05:52
深度学习环境搭建anaconda+pycharm+pytorch的方法步骤
2023-06-27 02:02:49
ADO组件之插入数据记录
2008-10-08 12:21:00