单行文本垂直居中和多行文本垂直居中以及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字体相关推荐

[css] 实现单行文本居中和多行文本左对齐并超出显示“...“
[css] 实现单行文本居中和多行文本左对齐并超出显示"-" .one {text-align: center }.multi {overflow: hiddentext-over ...
单行文本省略号和多行文本省略号
1.单行文本省略号 overflow:hidden; //多余的部分隐藏 white-space:nowrap; //让文字强制一行显示 text-overflow:ellipsis; //多余的部分 ...
[前端] 实现单行文本溢出和多行文本溢出省略
项目中经常会用的标题或摘要超出省略的功能,从网找了一些参照,在这里写一下,希望对你有帮助... 一.单行文本溢出省略 CSS样式: <style>.box {width: 120px;he ...
单行文本溢和多行文本溢出
一.单行文本溢出最常见的使用,直接贴出代码: .text {white-space: nowrap;text-overflow: ellipsis;overflow: hidden; } 二.多行文 ...
单行文本省略和多行文本省略
单行文本省略 overflow: hidden; text-overflow:ellipsis; white-space: nowrap; 多行文本省略 display: -webkit-box; - ...
单行文本溢出和多行文本溢出省略...
平时在开发过程中,很常见的需求就是文字溢出显示... 此类需求有以下集中方法来解决 1. 单行溢出显示... overflow:hidden; width: 200PX; white-space:n ...
web前端技巧-文本如何垂直居中？多行文本如何实现上下居中？
做前端开发的同学肯定对文本居中不陌生,但一般我们说的都是水平居中也就是左右居中,那么你想过没有如何实现垂直居中也就是上下居中吗?今天小千就来给大家介绍一下. 单行文字垂直居中-行高等于高度值上面的方 ...
HTML 中多行文本垂直居中
最近在做官网,其中有个小小的需求是一段多行文本在一个区域内垂直居中,就如下图所示: 需要将右面的文字垂直居中,通过网上查找资料显示可以使用display:table 的方法来实现. 请看这篇博文; h ...
单行文本溢出省略和多行文本溢出省略
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...

单行文本垂直居中和多行文本垂直居中以及font字体

单行文本垂直居中和多行文本垂直居中以及font字体相关推荐

最新文章

热门文章