澳门博彩官网

  发布时间:2018-11-29 16:10:37   作者:Kobe_G   我要评论

这篇文章主要介绍了关于css中line-height(行高)设置无效的问题的解决方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

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

我们先写下这一串代码:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		.head{
			height: 100px;
			text-align: center;
			line-height: 100px;/* 设置行高,让字体居中 */
			background: #333;/* 设置整个背景为黑色,便于观察字体 */
			color: red;
			font:700 18px simsun;/* 对字体进行设置 */
		}
	</style>
</head>
<body>
	<div class="head">
		你好,西南石油大学。
	</div>
</body>
</html>

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

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

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

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		.head{
			height: 100px;
			text-align: center;
			background: #333;/* 设置整个背景为黑色,便于观察字体 */
			color: red;
			font:700 18px simsun;/* 对字体进行设置 */
			line-height: 100px;/* 设置行高 */
		}
	</style>
</head>
<body>
	<div class="head">
		你好,西南石油大学。
	</div>
</body>
</html>

然后用浏览器打开:

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

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

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

相关文章

  • 深入理解CSS行高line-height与文本垂直居中的原理

    本文详细介绍了CSS行高属性line-height与文本垂直居中的原理,通过本文的介绍相信对大家以后使用line-height和设置文本垂直居中会更加熟练,有需要的可以参考借鉴。下面一
    2016-08-12
  • 全面了解css行高line-height的用法

    下面小编就为大家带来一篇全面了解css行高line-height的用法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-06-25
  • CSS中的line-height行高属性学习教程

    line-height对于页面中字体的行距等排版方面的效果至关重要,这里为大家整理了CSS中的line-height行高属性学习教程,包括line-height的各种取值设定等方面,需要的朋友可以参
    2016-06-06
  • CSS中的line-height行高属性的使用技巧小结

    这篇文章主要介绍了CSS中的line-height属性的使用技巧,文中同时给出了line-height使用中经常出现的文字重叠问题的解决方法,需要的朋友可以参考下
    2016-02-02
  • CSS中行高line-height属性的一些使用技巧

    这篇文章主要介绍了CSS中行高line-height属性的一些使用技巧,包括为每行文本指定不同颜色和文本中间添加线时用到的一些操作方法,需要的朋友可以参考下
    2015-08-21
  • css属性行高line-height的用法详解

    本文介绍下css中的line-height属性的用法,通过实例学习css line-height属性的具体用法,感兴趣的朋友参考下
    2014-08-02
  • CSS行高line-height的个人理解

    “行高“顾名思义指一行文子的高度,大家对CSS行高line-height都有自己的理解,下面为大家介绍下本人自己的理解
    2014-01-08
  • CSS line-height行高上下居中垂直居中样式属性

    我们在css编写中需要对大篇幅的内容显示的更好看,有些间隔,不要在挤在一起难看,就可以使用Line-Height属性进行控制
    2013-07-20

最新评论