html行高设置失效,关于css中line-height(行高)设置无效的问题的解决方法

关于css中line-height(行高)设置无效的问题

我们先写下这一串代码：

Document

.head{

height: 100px;

text-align: center;

line-height: 100px;/* 设置行高，让字体居中 */

background: #333;/* 设置整个背景为黑色，便于观察字体 */

color: red;

font:700 18px simsun;/* 对字体进行设置 */

}

你好，西南石油大学。

然后在浏览器中打开看看效果：

我们发现在垂直方向，字体并没有在盒子的中间显示。

然后我们把设置行高那条语句放在设置字体(font)的下面：

Document

.head{

height: 100px;

text-align: center;

background: #333;/* 设置整个背景为黑色，便于观察字体 */

color: red;

font:700 18px simsun;/* 对字体进行设置 */

line-height: 100px;/* 设置行高 */

}

你好，西南石油大学。

然后用浏览器打开：

字体就成功地跳到中间去啦~~~~~

总结：在用css对行高进行设置时，line-height的属性必须在font的下面，否则无效！

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

html行高设置失效,关于css中line-height(行高)设置无效的问题的解决方法相关推荐

CSS中利用BootStrap框架引入glyphicon图标无法显示的解决方法
想要引用如图的对勾图标结果显示出来的是一个方框出现该问题的原因是由于没有注意bootstrap引入css和fonts的规范,就可能会导致bootstrap 在显示glyphicon图标时无法正常显 ...
html行高设置失效,科技常识：关于css中line-height(行高)设置无效的问题的解决方法...
今天小编跟大家讲解下有关关于css中line-height(行高)设置无效的问题的解决方法 ,相信小伙伴们对这个话题应该有所关注吧,小编也收集到了有关关于css中line-height(行高)设置无效 ...
css中鼠标变成手型设置
css中鼠标变成手型设置不需要:hover选择主要依赖cursor属性,对应的设置值如下: default:标准箭头 //这是默认的样式 pointer:手形光标 wait :等待光标 text: ...
c语言中边框所占两列一行,css中的border-collapse属性如何设置表格边框线？（代码示例）...
css中的border-collapse属性如何设置表格边框线?本篇文章就给大家介绍css中的border-collapse属性是什么? border-collapse属性设置表格边框线的方法.有一定 ...
JSP中get和post请求方式的区别及乱码解决方法
JSP中get和post请求方式的区别及乱码解决方法 get提交方式:默认method="get" 和地址栏.超链接请求方式默认都属于get提交方式 form表单的method属 ...
某个应用导致html文件,某个应用导致你的默认浏览器设置出现问题(补丁又闯祸：Windows 10默认应用被重置附解决方法)...
某个应用导致你的默认浏览器设置出现问题(补丁又闯祸:Windows 10默认应用被重置附解决方法),哪吒游戏网给大家带来详细的某个应用导致你的默认浏览器设置出现问题(补丁又闯祸:Windows 10 ...
html没有注册类,电脑中ie浏览器提示没有注册类别的三种解决方法
ie浏览器功能十分强大,能够给我们带来很棒的网页浏览体验.不过,一些朋友反馈自己在使用ie浏览器过程中,突然遇到"没有注册类别"的出错提示,这是怎么回事呢?其实这是文件的丢失等原因 ...
位置在此计算机上运行程序灰色,Win10电脑中定位服务按钮灰色无法开启的2种解决方法...
在win10系统中自带有定位功能,这是系统收集数据的一个途径,很多应用会用到定位功能,比如地图应用就会用到我们的定位,所以我们就需要手动来开启定位服务,不过有win10系统用户反映说操作中心的定位按钮 ...
php源码时间慢8小时 etc gmt,PHP 中 Date 函数与实际时间相差8小时的解决方法
PHP 中的 date() 函数显示的时间是格林威治时间,和北京时间正好相差8个小时,其他时间相关的函数,如 strtotime() 也有相同的问题,同样可以通过下面的方法来解决: 1. 修改php. ...

html行高设置失效,关于css中line-height(行高)设置无效的问题的解决方法

html行高设置失效,关于css中line-height(行高)设置无效的问题的解决方法相关推荐

最新文章

热门文章