173 次浏览【转载需注明来源】
在项目开发中,类似标题栏这样的功能通常需要文字垂直居中的效果,而CSS是没有提供垂直居中的相关命令的,此时需要文字居中可以使用行高的命令来实现。
用一个需要更改行高的案例演示:
<样式>
.显示模式{
显示模式: 块级元素;
高度: 40px;
宽度: 200px;
背景-颜色: 颜色值-粉色;
}
</样式>
<超链接 链接地址="#" 类名="显示模式">超链接</超链接>
显示效果如下:
可以看见,文字是显示在左上角的,此时需要居中则可以更改元素的行高;之前的行高命令教学中有提过,行高会在默认文字的高度基础上,在文本的上方及下方增加间距【也就是根据设置的行高所居中】,所以只需要将行高设置为元素的高度即可实现文字垂直居中
更改过后的垂直居中代码如下:
<样式>
.显示模式{
显示模式: 块级元素;
高度: 40px;
宽度: 200px;
背景-颜色: 颜色值-粉色;
行高: 40px;
}
</样式>
<超链接 链接地址="#" 类名="显示模式">超链接</超链接>
展示效果如下:
知识点:想要设置文字垂直显示的坐标,可以通过行高命令实现,通过设置文字行高可以使文字显示在垂直方向的任意坐标中。
点击本处跳转案例下载:点击下载本文实例
测试账号