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 ...
随机推荐
- 数据库连接池c3p0的设置
spring-hibernate.xml配置 <?xml version="1.0" encoding="UTF-8"?> <beans xm ...
- jquery滚动条加载数据
//滚动条 $(window).scroll(function () { var scrollTop = $(this).scrollTop(); var scrollHeight = $( ...
- perl中调用cgi
来源: http://www.cnblogs.com/itech/archive/2012/09/23/2698856.html 参考:http://www.willmaster.com/librar ...
- Photoshop 钢笔 双窗口显示
钢笔:两点成一线 两点:Photoshop 叫锚点 中间线叫做路径 路径变选区 Crtl+Enter 窗口 >>>排列>>> 双联垂直 两个文件同时移动: shi ...
- addEventListener与removeEventListener
addEventListener:添加事件监听器 element.addEventListener(event, function, useCapture) event:事件类型,字符串,不要加&qu ...
- hover带有动画效果的导航
html,body{overflow-x:hidden;} ul,li{list-style: none;} .nav{width:100%; height: 26px; overflow: hidd ...
- LightOJ 1259 Goldbach`s Conjecture 素数打表
题目大意:求讲一个整数n分解为两个素数的方案数. 题目思路:素数打表,后遍历 1-n/2,寻找方案数,需要注意的是:C/C++中 bool类型占用一个字节,int类型占用4个字节,在素数打表中采用bo ...
- 单元测试、自动化测试、接口测试过程中的Excel数据驱动(java实现)
import java.io.FileInputStream;import java.io.InputStream;import java.util.HashMap;import java.util. ...
- 学习笔记——抽象工厂模式Abstract Factory
在工厂模式的基础上,通过为工厂类增加接口,实现其他产品的生产,而不用一类产品就增加一个工厂. 依然以<真菌世界>游戏故事类比,树作为工厂,如果现在有两类树,一类生产快速弄真菌飞机和20毫米 ...
- zencart 新页面调用好功能代码集：
其实很多就是看变量,就可以直接调用,而变量的定义地方很多,比如language 1. includes\languages\语言.php 2. 写个文件,放进includes\extra_confi ...