单行文本垂直居中和多行文本垂直居中以及font字体
?單行文本垂直居中
<style>*{margin: 0;padding: 0;}.box{width: 300px;margin: 20px auto 0;border: 1px solid pink;font-size: 14px;/* 單行文本垂直居中：讓盒子行高和文字行高兩者數據相同(只適用于單行，不能用于多行）*/height: 100px;line-height: 100px;}</style> </head> <body><div class="box">國國國國國國國國國國國國</div> </body>預覽圖
?需要注意的是，這個小技巧，行高=盒子高。 只適用于單行文本垂直居中！！不適用于多行
多行文本垂直居中
如果想讓多行文本垂直居中，需要設置盒子的padding
<style>*{margin: 0;padding: 0;}/* 字的總行高：14*9=126（300-126）/2=87 */.box{width: 300px;margin: 20px auto 0;border: 3px solid skyblue;font-size: 14px;padding-top: 87px;padding-bottom: 87px;} </style> </head> <body><div class="box">寒假將至，常州市體育醫院醫生蔣雪紅又要迎來新一批脊柱矯正訓練營小學員了。2021年，她的日程表安排得滿滿當當，“一方面政府更重視全民健康，今年將青少年脊柱側彎篩查納入常州市民生實事項目，另一方面老百姓也更追求健康生活，我們的暑假脊柱矯正訓練營期期爆滿，寒假班通知一發，就有不少家長來咨詢”。</div> </body>預覽圖
?
font字體
font-size 字號大小。
font-family就是“字體”。family是“家庭”、“伐木累”的意思。
使用font屬性，能夠將字號、行高、字體，能夠一起設置。 font: 14px/24px “宋體”; 等價于三行語句： font-size:14px; line-height:24px; font-family:"宋體";
<style>.title{font: 14px/24px '幼圓';}</style> </head> <body><h1 class="title">小芮</h1> </body>網頁中不是所有字體都能用哦，因為這個字體要看用戶的電腦里面裝沒裝，比如你設置：使用方正新綜藝簡體
font: 14px/24px '方正新綜藝簡體';如果用戶電腦里面沒有這個字體----方正新綜藝簡體，那么就會變成宋體。
在項目中頁面里，中文只使用： 微軟雅黑、宋體、黑體。
如果頁面中，需要其他的字體，那么需要切圖。
如果頁面中，需要使用英文，則使用：英語：Arial 、 Times New Roman
為了防止用戶電腦里面，沒有微軟雅黑這個字體。就要用英語的逗號，隔開備選字體，就是說如果用戶電腦里面，沒有安裝微軟雅黑字體，那么就是宋體。
(其中，備選字體可以有無數個，用逗號隔開)。
例如：
ont: 14px/24px '微軟雅黑','宋體';要將英語字體，放在最前面，這樣所有的中文，就不能匹配英語字體，就自動的變為后面的中文字體
font: 14px/24px 'Times New Roman','微軟雅黑','宋體';微軟雅黑的英語別名Microsoft YaHei? ?宋體的英語別名SimSun
行高可以用百分比，表示字號的百分之多少。一般來說，都是大于100%的，因為行高一定要大于字號。
200% 在這里表示 字號的2倍，12px*2=24px
例如：
font:12px/200% '宋體'; 等價于 font:12px/24px '宋體'; <style>.box{color: blueviolet;/* 全寫 *//* font-size: 140px;(字號)line-height: 200px;（行高）font-family: '幼圓'; （字體：楷體，幼圓，微軟雅黑，宋體SimSun \u5b8b\u4f53）*//* 備用的字體用，隔開font：140px/200px （可以寫成200%）'方正綜藝簡體','幼圓'*//* 簡寫 *//* font: 140px/200px '幼圓'; *//* 'Microsoft YaHei' 微軟雅黑黑體 arial*/font: 14px/24px 'Times New Roman','Microsoft YaHei','宋體'; }</style> </head> <body><div class="box">小芮 小李</div> </body>預覽圖
?
總結
以上是生活随笔為你收集整理的单行文本垂直居中和多行文本垂直居中以及font字体的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： vue.js 项目打包APP应用包
- 下一篇： hdu3001(状态压缩dp）