网站首页
关于深山
客户案例
业务范围
联系深山
网络投票系统
企业网站建设
旅行社网站建设
小程序
留言板
技术文章
许愿墙(qq爱墙)
技术首页
百度小程序开发
微信小程序开发
微信公众号开发
uni-app
asp函数库
ASP
asp.net
DIV+CSS
HTML
SEO搜索引擎忧化
下载类信息
个人空间
代码生成
电商
python
页面特效
表格特效
导航菜单
图形特效
表单特效
时间日期
色彩类别
链接特效
网页特效
系统硬件
网站公告
网页学习
技术类文章
网站类信息
订阅本栏目 RSS
您所在的位置:
深山工作室
>
DIV+CSS
> 正文
div中的图片链接居中的问题
深山行者个人网站 2009/3/8 9:20:48 深山行者 字体:
大
中
小
浏览 13690
以下为详细代码
<!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=gb2312" /> <title>div中的图片链接居中的问题</title> </head> <body> <style> * {paddding:0;margin:0;border:0;} .divbox { margin:38px; width:200px; height:200px; background:#E6E6E6; position:relative;/*设置当前DIV层为一个相对的对象*/ } .divbox img { width:50px;/*设置图片大小*/ height:50px; position:absolute;/*现在针对于父一级,采用绝对的定位*/ top:50%;/*上与左边各50%*/ left:50%; margin-top:-25px;/*上面的偏移还没有达到真正的居中,现在开始移动图,移动的位置是图片的一半*/ margin-left:-25px; } </style> <div class="divbox"> <a href="http://www.qwbm.com" title="预览"><img title="aaaa" src="/UploadFiles/demo/qwbm5.jpg"/></a> </div> </body> </html>
另外一个不设定图片大小的居中样式
以下为详细代码
<!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=GB2312" /> <title>无标题文档</title> <style type="text/css"> .pp-list { height: 1%; overflow: hidden; display:table; border-spacing:10px; } .pp-list li { border:1px solid #aaa; width:150px; height:150px; text-align:center; vertical-align:middle; position:relative; margin: 10px; *float:left; display: table-cell; } .pp { *position:absolute; top:50%; } .pp img { *position:relative; top:-50%; left:-50%; } </style> </head> <body> <ul class="pp-list"> <li><div class="pp"><img src="http://i0.sinaimg.cn/blog/08index/blog_mj_005_2.gif" _ewebeditor_ta_src="http%3A%2F%2Fi0.sinaimg.cn%2Fblog%2F08index%2Fblog_mj_005_2.gif" ></div></li> <li><div class="pp"><img src="http://mat1.qq.com/www/images/allskin/wmlogo.gif" _ewebeditor_ta_src="http%3A%2F%2Fmat1.qq.com%2Fwww%2Fimages%2Fallskin%2Fwmlogo.gif" ></div></li> <li><div class="pp"><img src="http://img1.cache.netease.com/cnews/netease/logo_w.gif" _ewebeditor_ta_src="http%3A%2F%2Fimg1.cache.netease.com%2Fcnews%2Fnetease%2Flogo_w.gif" ></div></li> </ul> </body> </html>
前一页:
相册列表显示模式
后一页:
css改变页面中的文字颜色与字体粗体
相关阅读
利用CSS的position定位属性定义一个顶部飘动的柳叶效果非常酷
微信小程序直播组件live-player-plugin(wx2b03c6e691cd7370)
ASP常用内置函数(上)
ASP汉字转拼音,支持自定义特殊词语
深山工作室
一个利用纯java做的非常漂亮的页面背景花瓣效果
微信公众号回复图片消息或用客服接口推送图片消息
利用DateAdd把时间差转换为正常日期格式
更多信息>>
栏目类别选择
百度小程序开发
微信小程序开发
微信公众号开发
uni-app
asp函数库
ASP
DIV+CSS
HTML
python
更多>>
同类信息
jquery设置或获取修改classname
利用css3.0写出一个音乐播放的唱片碟盘的效果
利用css中的scale()实现放大缩小效果
利用background-color:#000000a8在背景颜色16进制代码之后加字母加上数字让背景色透明
css背景使用base64编码或者将base64编码放在img图片标签中
利用css3中的-webkit-font-smoothing把网页文字的毛边去掉
更多>>
最新添加文章
dw里面查找替换使用正则删除sqlserver里面的CONSTRAINT
Android移动端自动化测试:使用UIAutomatorViewer与Selenium定位元素
抖音直播音挂载小雪花 懂车帝小程序
javascript获取浏览器指纹可以用来做投票
火狐Mozilla Firefox出现:无法载入您的Firefox配置文件 它可能已经丢失 或是无法访问 问题解决集合处理办法
在Android、iOS、Windows、MacOS中微信小程序的文件存放路径
python通过代码修改pip下载源让下载库飞起
python里面requests.post返回的res.text还有其它的吗
更多>>
随机抽取信息
扬子国际
理解css里的!important是什么意思?
js中innerHTML,innerText,outerHTML的用法与区别
利用background-color:#000000a8在背景颜色16进制代码之后加字母加上数字让背景色透明
旅行社线路主题默认模板4
XHTML+CSS兼容性解决方案小集
更多标签
热门标签
快捷
表达式
展开
DIV+CSS做的透明菜单兼容IE、FF等
cpu
innerText
眼睛
浮动对象
Google
混合
下拉框
预览
手
经典
获得
jpg
技巧
option
考试
屏幕
移动
菜单
自动隐藏
刷新
滑过
层
控制
时钟
加长
字节数
超出
添加
柱状
深山行者V1.2旅行社网站管理系统
ctrl
日期
alert
web2.0
深山行者
增大
后台
上 下 左 右
ewebeditor
media
翻滚
旅游
断线
随机
导航
VBScript
免责声明:本站所有资料信息,有部分为本人原创,部分为从网络收集而来,仅供网友查看阅读所用,所有信息版权归信息所有人或所有公司所有
如果信息内容侵犯到您的版权或权益请与我们联系,经确认后我们会立即移除相关内容或链接
Copyright © 2007-2026
深山工作室
All Rights Reserved
服务QQ:
565449214
手机:
13961347334
ICP备案:
苏ICP备15019627号
苏公网安备 32070502010230号