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 ...
随机推荐
- vs远程调试
一.远程 建立共享目录debug 二.本地 1.生成->输出->输出路径,由"bin\Debug\"改为远程目录"\\xxx\\debug&quo ...
- apt-key adv
gpg --recv-keys KEY-ID gpg --armor --export KEY-ID | sudo apt-key add - http://m.blog ...
- sql server 的datediff函数
这两天要把一个sqlserver数据库的程序改成oracle的,发现两个数据库之间的函数很多不一样.sqlserver的数据库中的DateDiff 函数用法解释如下: 描述 返回两个日期之间的时间间隔 ...
- git 使用系列（二）---- 分支和合并
Branching and Merging The Git feature that really makes it stand apart from nearly every other SCM o ...
- Content-Type小解
在Http请求中,经常用Content-Type来定义网络文件的类型和网页的编码,在发送请求,返回数据时决定浏览器将以什么形式,什么编码来读取此文件. 常用类型: text 文本类型 1.text/p ...
- FileSystemXmlApplicationContext方法的绝对路径问题
public AgentServer(Socket c,String confDir) { this.client = c; ApplicationContext ac = new FileSyste ...
- URL特殊字符需转义
URL特殊字符需转义 1.空格换成加号(+) 2.正斜杠(/)分隔目录和子目录 3.问号(?)分隔URL和查询 4.百分号(%)制定特殊字符 5.#号指定书签 6.&号分隔参数 转义字符的原因 ...
- 多线程进阶之并发工具类：CountDownLatch、CyclicBarrier
并发工具类在java.util.concurrent包下.常用的有CountDownLatch.CyclicBarrier,用它们可以控制并发流程. 1.CountDownLatch探究: 主要用到其 ...
- sqlserver 2008 查看表描述，和表结构
sp_help sys_user sp_columns sys_user --表结构 THEN obj.name ELSE '' END AS 表名, col.colorder AS 序号 , c ...
- 单元测试、自动化测试、接口测试过程中的Excel数据驱动(java实现)
import java.io.FileInputStream;import java.io.InputStream;import java.util.HashMap;import java.util. ...