首页
网页制作
网络编程
脚本专栏
数据库
网站运营
网络安全
平面设计
CMS教程
搜索
建站极客
网页制作
CSS
正文
让图片 div居中实现代码
所属分类:
网页制作
/
CSS
阅读数: 1155
收藏 0
赞 0
分享
<!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" xml:lang="en" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>hezc</title> <style type="text/css"> .hezc{width:200px; height:200px;line-height:200px;font-size:180px;text-align:center;display:table-cell; vertical-align:middle;border:1px solid #ccc} .hezc img{ vertical-align:middle;} </style> </head> <body> <div class="hezc"> <img src="http://lh4.ggpht.com/_ukA5Ln2cXIc/SRcgn5exDoI/AAAAAAAAAD4/JqcPpNZDPlI/s400/CSS%E9%80%9F%E8%AE%B0%E5%8D%A1%E7%89%87.gif" border="1" widht="100" height="100"/> </div> </body> </html>
提示:可以修改后运行.
img 图片居中:先小小的记录下发现的新方法,有空在整理下。
具体代码:
CSS Code
复制内容到剪贴板
<!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"
xml:lang=
"en"
lang=
"en"
>
<head>
<meta http-equiv=
"Content-Type"
content
=
"text/html; charset=gb2312"
/>
<title>hezc</title>
<style type=
"text/css"
>
.hezc{
width
:
200px
;
height
:
200px
;
line-height
:
200px
;
font-size
:
180px
;
text-align
:
center
;
display
:
table-cell
;
vertical-align
:
middle
;
border
:
1px
solid
#ccc
}
.hezc img{
vertical-align
:
middle
;}
</style>
</head>
<body>
<div class=
"hezc"
>
<img
src
=
"https://www.jb51.net/images/logo.gif"
border
=
"1"
widht=
"100"
height
=
"100"
/>
</div>
</body>
</html>
更多精彩内容
其他人还在看
2013年五大主流浏览器 HTML5 与 CSS3 兼容性大比拼
这篇文章主要介绍了2013年五大主流浏览器 HTML5 和 CSS3 兼容性大比拼,需要的朋友可以参考下
评论 0
收藏 0
赞 0
分享
前端设计师需要了解的9个问题
这篇文章主要介绍了前端设计师需要了解的9个问题以及注意事项,非常的实用,是篇非常不错的文章,这里推荐给大家
评论 0
收藏 0
赞 0
分享
CSS强制性换行的方法区别详解
自动换行问题,正常字符的换行是比较合理的,而连续的数字和英文字符常常将容器撑大,挺让人头疼,下面介绍的是CSS如何实现换行的方法对于div,p等块级元素正常文字的换行(亚洲文字和非亚洲文字)元素拥有默认的white-space:normal,当定义的宽度之后自动换行
评论 0
收藏 0
赞 0
分享
CSS语义化命名方式及常用命名规则
本文搜集了一些CSS语义化命名方式以及命名规则。如有错误或不妥之处,敬请指出,欢迎你提出更好的建议,加插更多的命名规范。
评论 0
收藏 0
赞 0
分享
ul li内容宽度的问题的解决方案
在IE6下只要我设置LI的宽度为auto,不论LI里面的内容多长,LI的宽度始终是100%,即UL的宽度(这里我已经写死了UL的宽度)。设置max-width也没用。高手们,在IE系列浏览器中如何使LI的宽度真正的随着内容增长而增长呢?像FF那样。
评论 0
收藏 0
赞 0
分享
html5+css3气泡组件的实现
本文是html5+css3系列教程的第一篇,给大家讲述html5+css3实现气泡组件,讲解的十分的详细,这里推荐给大家,希望对大家能有所帮助
评论 0
收藏 0
赞 0
分享
html5+css3之CSS中的布局与Header的实现
本文从CSS3的布局(CSS的布局的演化、CSS3盒模型-box-sizing、float布局中的bfc、Flexbox简介)Header布局的实现(float实现布局、Header js的实现)向我们展示了HTML5与CSS3的魅力。
评论 0
收藏 0
赞 0
分享
一款恶搞头像特效的制作过程 利用css3和jquery
今天给大家介绍一款恶搞头像特效的制作过程,你可以把任意一张照片放到跳舞的漫画中,为他带上不同的帽子,让他翩翩起舞,下面我们一起来看一下制作过程和效果
评论 0
收藏 0
赞 0
分享
大图片根据分辨率自适应宽度仍居中显示
一个1920*900的大图,在1024*768的分辨率下仍居中显示,如何做到这一点,下面是一个可行的解决方案
评论 0
收藏 0
赞 0
分享
CSS3提交意见输入框样式代码
这个提交意见输入框,结构使用到了table,样式用的css3,包含了多方面的知识,比较适合新手朋友们
评论 0
收藏 0
赞 0
分享
查看更多
网络赚钱
更多
淘宝客服退款竟是诈骗新招 南昌网友17.5万元险被骗走
网上赚钱怎么赚钱?网上兼职的方法有哪些
女子注册相亲网站收到短信 点击链接后6万块钱不翼而飞
浅谈网络营销:从卖鸡蛋面的老板联想到个人站长
谷歌广告怎么收款?光大银行需要携带资料到柜台办理
SEO都有哪些赚钱的方式? SEO的十种赚钱方式详解
站长故事
更多
站长故事:一个90后站长的自述
阿里IPO在即,看阿里与京东战略和经营之比
站长们,就别在折腾你的用户了
站长故事之我的个人站长之路
大脚:一个老站长的垂死宣言
做站7年