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. network: 思科-华为光模块

    思科-华为光模块的分类比较   摘要:本文介绍:思科GLC-SX-MM,GLC-LH-SM光模块等产品参数与图片,华为光模块的型号与分类等知识. 光模块分类与介绍 一.思科厂家 1.多模光模块 型号: ...

  2. 登录数据库后，use db很慢的问题

    mysql> use dbl Reading table information for completion of table and column names You can turn of ...

  3. 8.3 sikuli 集成进eclipse 报错：eclipse中运行提示 Win32Util.dll: Can't load 32-bit .dll on a AMD 64 bit platform

    sikuli运行出现问题:Win32Util.dll: Can't load 32-bit .dll on a AMD 64 bit platform 在64位平台上无法加载32位的dll文件 解决办 ...

  4. CentOS下载及版本选择-CentOS LiveCD、LiveDVD和BinDVD区别

    1.CentOS系统镜像有两个,安装系统只用到第一个镜像即CentOS-6.x-i386-bin-DVD1.iso(32位)或者CentOS-6.x-x86_64-bin-DVD1.iso(64位), ...

  5. 一个不错的PHP文件页面缓存类

    在php中缓存分类数据库缓存,文件缓存和内存缓存,下面我来给各位同学详细介绍PHP文件缓存类实现代码,有需要了解的朋友可参考. 页面缓存类 <?php    /*    * 缓存类    cac ...

  6. iOS 6 Passbook 入门 1/2

    http://www.raywenderlich.com/zh-hans/23066/ios-6-passbook-%E5%85%A5%E9%97%A8-12 iOS 6 Passbook 入门 1/ ...

  7. “找回” Envi 快捷方式

      Envi+IDL文件夹挪到别的电脑,不用安装,直接可以使用.但是桌面和开始菜单没有了Envi,IDL,envi+idl的快捷方式,很不方便.   记录一下快捷方式命令行,备用: envi快捷方式 ...

  8. 转：Loadrunner学习知多少--脚本录制下载操作

    在很多时候我们可能需要对系统进行这样的脚本开发,模拟用户点击一个下载链接,然后弹出下载框,选择保存,用来测试在大量用户下载时服务器的性能.但是现在大家对于这种脚本的处理方式往往是通过关联和C 语言的文 ...

  9. HTTP代理浅说

    简单的说HTTP代理就是处于HTTP客户端和服务器端之间,中转消息的中间人. 一种代理是代客户端去请求服务器,叫做Forward Proxy正向代理:另一种是代理真正的服务器来接收用户请求,叫做Rev ...

  10. js的阻塞特性

    JS具有阻塞特性,当浏览器在执行js代码时,不能同时做其它事情,即<script>每次出现都会让页面等待脚本的解析和执行(不论JS是内嵌的还是外链的),JS代码执行完成后,才继续渲染页面. ...