css中行高什么时候设置会有效?

css中行高什么时候设置会有效?下面本篇文章给大家简单介绍一下关于css中line-height(行高)设置无效的问题。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。

我们先写下这一串代码:

<!DOCTYPE html>
<html>
<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>
你好,西南石油大学。
</div>
</body>
</html>

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

1.png

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

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

<!DOCTYPE html>
<html>
<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>
你好,西南石油大学。
</div>
</body>
</html>

然后用浏览器打开:

2.png

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

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

更多web前端开发知识,请查阅 HTML中文网 !!

以上就是css中行高什么时候设置会有效?的详细内容,更多请关注web前端其它相关文章!

赞(0) 打赏
未经允许不得转载:web前端首页 » CSS3 答疑

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏