当前位置: 代码迷 >> Web前端 >> Div图片垂直居中的步骤
  详细解决方案

Div图片垂直居中的步骤

热度:13   发布时间:2012-11-23 00:03:43.0
Div图片垂直居中的方法

css:

<style>
.box?
{
????????
/*非IE的主流浏览器识别的垂直居中的方法*/
????????display
:?table-cell;
????????vertical-align
:middle;

????????
/*设置水平居中*/
????????text-align
:center;

????????
/*?针对IE的Hack?*/
????????*display
:?block;
????????*font-size
:?175px;/*约为高度的0.873,200*0.873?约为175*/
????????*font-family
:Arial;/*防止非utf-8引起的hack失效问题,如gbk编码*/

????????width
:200px;
????????height
:200px;
????????border
:?1px?solid?#eee;
}
.box?img?
{
????????
/*设置图片垂直居中*/
????????vertical-align
:middle;
}
</style>
?

?

?

html:

?

?<div?class="box"><a?href="http://www.howpm.com"?target="_blank"><img?src="http://howpm.com/images/dz7/logo.gif"?/></a></div>
  相关解决方案