欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

關于css中l(wèi)ine-height(行高)設置無效的問題的解決方法

  發(fā)布時間：2018-11-29 16:10:37   作者：Kobe_G   我要評論
這篇文章主要介紹了關于css中l(wèi)ine-height(行高)設置無效的問題的解決方法，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

關于css中l(wèi)ine-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>

然后在瀏覽器中打開看看效果：

我們發(fā)現在垂直方向，字體并沒有在盒子的中間顯示。

然后我們把設置行高那條語句放在設置字體(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的用法

    下面小編就為大家?guī)硪黄媪私鈉ss行高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

最新評論