首页
|
互联网
|
IT动态
|
Cisco
|
Windows
|
Linux
|
Java
|
.Net
|
Oracle
|
华为
|
存储世界
|
服务器
|
网络设备
|
IDC
|
安全
|
求职招聘
IT培训
|
数字网校
|
技术专题
|
电子书下载
|
教学视频
|
网页设计
|
平面设计
|
解决方案
|
直播室
|
虚拟考场
|
搜索
|
博客
|
沙龙
|
论坛
网页设计
Dreamweaver
|
Flash
Fireworks
|
Frontpage
HTML/CSS
|
Javascript
平面设计
Photoshop
|
CorelDraw
AuotoCAD
|
Illustrator
Freehand
多 媒 体
3DMax
|
Authorware
Director
|
Maya
工具软件
PP点点通
|
迅雷
|
BT
eMule
|
FlashGet
|
Nero
Ghost
|
Outlook
|
IE
Maxthon
|
Office
即时通讯
QQ
|
MSN
|
网易泡泡
Skype
|
雅虎通
|
新浪UC
最新文章
您现在的位置：
中国IT实验室
>>
网页设计
>>
Dreamweaver
>>
Dreamweaver技巧教程
>> 文章正文
一个div里面图片垂直居中的例子
中国设计秀cnwebshow.com
2008-1-17
佚名
保存本文
推荐给好友
收藏本站
◆ 网页平面多媒体培训、认证考试免费咨询热线:
400-700-5807
进入网络咨询平台
◆
源码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>一个div里面图片垂直居中的例子</title> <style type="text/css"> <!-- * {margin:0;padding:0} div { width:500px; height:500px; border:1px solid #ccc; overflow:hidden; position:relative; display:table-cell; text-align:center; vertical-align:middle } div p { position:static; +position:absolute; top:50% } img { position:static; +position:relative; top:-50%;left:-50%; width:276px; height:110px } --> </style> </head> <body> <div> <p><img src="http://webdesign.chinaitlab.com/UploadFiles_8014/200801/20080117140156958.gif" /></p> </div> </body> </html>
[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
【责编:Luzi】
相关产品与培训
相关文章
推荐文章
符合web标准的跟随滚动条运动
网页设计中关键词高亮显示
CSS实现始终在页面底部的层效果
css学习者，2008不要太浮燥
个人网站真能转成商业网站，你能么？
CSS样式表创建美妙绝伦的网站
自己设计制作电脑系统的动画光标
十步学会用css建站第六步
十步学会用css建站第五步
十步学会用css建站第四步
文章评论
精彩友情推荐
华为网管交换机
IDC资讯大全
华为以太网交换机
机房品质万里行
华为交换机最新报价
IDC托管必备知识
华为千兆光纤交换机
全国IDC报价
华为千兆交换机
网站推广优化
中国设计秀cnwebshow.com 
2008-1-17 
佚名 
相关文章