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属性的更多相关文章

  1. CSS实现文字竖排 DIV CSS文字垂直竖列排版显示如何实现？

    DIV CSS实现文字竖排排版显示兼容各大浏览器,让文字垂直竖列排版布局. 有时我们需要一段文字进行从上到下竖列排版,我们知道CSS样式中有一样式可以让其竖列排版,但所有浏览器不全兼容,逼不得已放弃. ...

  2. CSS div水平垂直居中和div置于底部

    一.水平居中 .hor_center { margin: 0 auto; } 二.水平垂直居中 .content { width: 360px; height: 240px; } .ver_hor_c ...

  3. HTML/CSS：div居中和div内部元素垂直居中（1）

    div居中 div水平和垂直居中,text-align和vertical-align不起作用,因为标签div没有这两个属性,所以再css中设置这两个值不能居中的效果 1. div水平居中:设置marg ...

  4. 三行代码实现垂直居中和cube

    三行代码实现上下居中 position: relative;top: 50%;transform: translateY(-50%); 效果如下:   代码: <!DOCTYPE html> ...

  5. CSS文字，文本常用样式

    CSS文字,文本常用样式 字体属性 font-family 如果电脑没有第一个字体,就切换到下一个 body { font-family: Microsoft YaHei,Helvetica,Aria ...

  6. 解读CSS布局之-水平垂直居

    对一个元素水平垂直居中,在我们的工作中是会经常遇到的,也是CSS布局中很重要的一部分,本文就来讲讲CSS水平垂直居中的一些方法.由于我们大搜车的日常工作中已经不再需要理会低版本IE,所以本文所贴出的方 ...

  7. 【转】css布局居中和CSS内容居中区别和对应DIV CSS代码

    原文地址:http://www.divcss5.com/jiqiao/j771.shtml css布局居中和CSS内容居中区别和对应DIV CSS代码教程与图文代码案例篇 对于新手来说DIV CSS布 ...

  8. css字体样式(Font Style),属性

    css字体样式(Font Style),属性   css字体样式(Font Style)是网页中不可或缺的样式属性之一,有了字体样式,我们的网页才能变得更加美观,因此字体样式属性也就成为了每一位设计者 ...

  9. 【转载】CSS font关键字属性值的简单研究

    文章转载自 张鑫旭-鑫空间-鑫生活 http://www.zhangxinxu.com/wordpress/ 原文链接:http://www.zhangxinxu.com/wordpress/?p=5 ...

随机推荐

  1. MySQL 索引 总结

    1.索引的种类(六种) 普通索引,唯一索引,全文索引,单列索引,多列索引,空间索引 2.优缺点及注意事项 优点:有了索引,对于记录数量很多的表,可以提高查询速度. 缺点:索引是占用空间的,索引会影响u ...

  2. centos7与centos6区别

    CentOS 7 vs CentOS 6的不同   (1)桌面系统[CentOS6] GNOME 2.x[CentOS7] GNOME 3.x(GNOME Shell)(2)文件系统[CentOS6] ...

  3. ng-option小解

    ng-option 有数组,对象两种情况,但目前只接触过数组 数组: label for value in array 分为一般数组和对象数组 一般数组: <select ng-model=&q ...

  4. java应用测试报告生成(一): sonarqube配合Jenkins生成测试报告及覆盖率

    环境准备: 1.Jenkins集成环境(安装 sonarqube插件) 2.安装sonarqube服务(下载sonarqube安装包并解压,目录到"sonarqube-5.4/bin/lin ...

  5. OpenGL----绘制立方体,定点数组与顶点缓冲

    ,立方体是很简单,但是这里只是拿立方体做一个例子,来说明OpenGL在绘制方法上的改进.从原始一点的办法开始一个立方体有六个面,每个面是一个正方形,好,绘制六个正方形就可以了. glBegin(GL_ ...

  6. 一个经典的PHP验证码类分享

    我们通过PHP的GD库图像处理内容,设计一个验证码类Vcode.将该类声明在文件vcode.class.php中,并通过面向对象的特性将一些实现 的细节封装在该类中.只要在创建对象时,为构造方法提供三 ...

  7. MFC 透明内存DC

    在MFC中绘制比较复杂图形,通常采用双缓冲技术来绘图,的确可以大大加快绘制速度和减少闪烁,但是有些情况也不尽然. 我最近遇到了一个问题,采用的也是双缓冲来加快绘图,但是绘制效果还是不尽人意.A对象里大 ...

  8. div.2/Bellovin<最长上升子序列>

    题意: 序列arr[i--n];输出以a[i]为结尾的最长上升子序列.1<=n<=100000; 思路: O(n*log(n)),求最长上升子序列. #include<cstdio& ...

  9. 记一次坑die(误)的题目--HDU2553--(DFS)

    ,N皇后问题   Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Total Subm ...

  10. 3--OC -- 点语法

    3.OC -- 点语法 1.方法名 // 冒号也是属于方法名的一部分 - (void)setAge:(int)age; // 方法名是 setAge: - (void)setAge; // 方法名是 ...