CSS文字垂直居中和font-family属性
1、单行文字的垂直居中
单行文字垂直居中比较简单，直接让行高==盒子高度即可。
2、多行文字居中
多行文字居中，只需简单计算一下盒子的上padding即可。计算公式：padding-top=（盒子的高度-文字总行数*行高）/；
多行文字第一行文字缩进两个文字，用text-indent:2em;属性。
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
*{
margin:0;padding:0;
}
p{
width:200px;
height:140px;
background:red;
padding-top:60px;
line-height:20px;
font-size:14px;
}
</style>
</head> <body>
<div>
<p>文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</p>
</div>
</body>
</html>
3、页面中常用字体：微软雅黑，宋体，黑体。备选字体用逗号隔开，备选字体可以有多个。Times New Roman和Arial 只匹配英语但是一定要放在最前面才能对英文字母起作用。
CSS文字垂直居中和font-family属性的更多相关文章
- CSS实现文字竖排 DIV CSS文字垂直竖列排版显示如何实现？
DIV CSS实现文字竖排排版显示兼容各大浏览器,让文字垂直竖列排版布局. 有时我们需要一段文字进行从上到下竖列排版,我们知道CSS样式中有一样式可以让其竖列排版,但所有浏览器不全兼容,逼不得已放弃. ...
- CSS div水平垂直居中和div置于底部
一.水平居中 .hor_center { margin: 0 auto; } 二.水平垂直居中 .content { width: 360px; height: 240px; } .ver_hor_c ...
- HTML/CSS：div居中和div内部元素垂直居中（1）
div居中 div水平和垂直居中,text-align和vertical-align不起作用,因为标签div没有这两个属性,所以再css中设置这两个值不能居中的效果 1. div水平居中:设置marg ...
- 三行代码实现垂直居中和cube
三行代码实现上下居中 position: relative;top: 50%;transform: translateY(-50%); 效果如下: 代码: <!DOCTYPE html> ...
- CSS文字，文本常用样式
CSS文字,文本常用样式 字体属性 font-family 如果电脑没有第一个字体,就切换到下一个 body { font-family: Microsoft YaHei,Helvetica,Aria ...
- 解读CSS布局之-水平垂直居
对一个元素水平垂直居中,在我们的工作中是会经常遇到的,也是CSS布局中很重要的一部分,本文就来讲讲CSS水平垂直居中的一些方法.由于我们大搜车的日常工作中已经不再需要理会低版本IE,所以本文所贴出的方 ...
- 【转】css布局居中和CSS内容居中区别和对应DIV CSS代码
原文地址:http://www.divcss5.com/jiqiao/j771.shtml css布局居中和CSS内容居中区别和对应DIV CSS代码教程与图文代码案例篇 对于新手来说DIV CSS布 ...
- css字体样式(Font Style),属性
css字体样式(Font Style),属性 css字体样式(Font Style)是网页中不可或缺的样式属性之一,有了字体样式,我们的网页才能变得更加美观,因此字体样式属性也就成为了每一位设计者 ...
- 【转载】CSS font关键字属性值的简单研究
文章转载自 张鑫旭-鑫空间-鑫生活 http://www.zhangxinxu.com/wordpress/ 原文链接:http://www.zhangxinxu.com/wordpress/?p=5 ...
随机推荐
- jquery新窗口打开链接
第一种:下面的代码是针对m35ui这个样式下的a都是在新窗口打开 <script type="text/javascript"> jQuery(document ...
- pro文件常用内容
qmake生成的pro文件中常用变量 SUBDIRS 指定子目录 TARGET 指定生成的应用程序名(默认为项目名) DEPENDPATH 指定程序编译时依赖的相关路径 INCLUDEPATH 指定头 ...
- maven之pom
记录一下最近的pom的相关设置,plugin的官方地址配置:http://maven.apache.org/plugins/index.html 看了网上说了很多例子,有很多不清楚,看一下官方的,会有 ...
- C#生成随机汉字
using System; using System.Text; namespace ConsoleApplication { class ChineseCode { ...
- IOS 中常用站位符
CGPoint.CGRect等可以转化为字符串打印出来 如: NSLog(@"-------------%@",NSStringFromCGPoint(point)); ...
- HDU 2255 奔小康赚大钱 KM算法的简单解释
KM算法一般用来寻找二分图的最优匹配. 步骤: 1.初始化可行标杆 2.对新加入的点用匈牙利算法进行判断 3.若无法加入新编,修改可行标杆 4.重复2.3操作直到找到相等子图的完全匹配. 各步骤简述: ...
- 无线手柄+步进电机——控制方向
今天测试了一下无线手柄控制电机转向的改变 1: #include <PS2X_lib.h> //for v1.6 2: #include <Stepper.h> 3: 4: ...
- 贪心<haonan>
题意: 有一列数,每次在相邻的两个书里面选择一个大数留下,同时ans+大数.问题是,求ans的最小值. 题解: 如果a[i]>a[i-1],那么ans+=a[i]; 如果a[i]>=a[i ...
- Java中常见的5种WEB服务器介绍
这篇文章主要介绍了Java中常见的5种WEB服务器介绍,它们分别是Tomcat.Resin.JBoss.WebSphere.WebLogic,需要的朋友可以参考下 Web服务器是运行及发布Web应用的 ...
- Vector2.Angle 的 bug
获取角度 ,官方提供了 Vector2.Angle 来得值,他的值是在 0 ,180之间 原始代码是 public static float Angle(Vector3 from, Vector3 ...