让字体在div容器中垂直居中

1. 只显示一行数据的话：
给容器设置height和line-height，并使两个值相等，再加上over-flow:hidden
.test{
　　height:40px;
　　line-height:40px;
　　overflow:hidden;
}
优点：
1. 同时支持块级和内联极元素
2. 支持所有浏览器
缺点：
1. 只能显示一行
2. IE中不支持<img>等的居中
要注意的是：
1. 使用相对高度定义你的 height 和 line-height
2. 不想毁了你的布局的话，overflow: hidden 一定要

2.多行内容居中，且容器高度可变
给出一致的 padding-bottom 和 padding-top 就行
.test{
　　padding-top:24px;
　　padding-botton:24px;
}
优点：
1. 同时支持块级和内联极元素
2. 支持非文本内容
3. 支持所有浏览器
缺点：
容器不能固定高度

巴特西

让字体在div容器中垂直居中

最新文章

热门文章