首页
网页制作
网络编程
脚本专栏
数据库
网站运营
网络安全
平面设计
CMS教程
搜索
建站极客
网页制作
CSS
正文
让图片 div居中实现代码
所属分类:
网页制作
/
CSS
阅读数: 1190
收藏 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>
更多精彩内容
其他人还在看
CSS3实现背景透明文字不透明的示例代码
这篇文章主要介绍了CSS3实现背景透明文字不透明的示例代码的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
评论 0
收藏 0
赞 0
分享
浅谈CSS中的尺寸单位
这篇文章主要介绍了浅谈CSS中的尺寸单位的相关资料,浏览器的兼容性越来越好,移动端基本是清一色的webkit,经常会用到css的不同尺寸/长度单位,这里做个整理。感兴趣的小伙伴们可以参考一下
评论 0
收藏 0
赞 0
分享
CSS中有些属性的前面会加上“*”或“_”所代表的意思
这篇文章主要介绍了CSS中有些属性的前面会加上“*”或“_”所代表的意思,需要的朋友可以参考下
评论 0
收藏 0
赞 0
分享
CSS 设置滚动条样式的实例代码
这篇文章主要介绍了CSS 设置滚动条样式的实例代码,非常不错,具有一定的参考借鉴价值,需要的朋友参考下吧
评论 0
收藏 0
赞 0
分享
纯CSS制作各种各样的网页图标(三角形、暂停按钮、下载箭头、加号等)
这篇文章主要介绍了纯CSS制作各种各样的网页图标(三角形、暂停按钮、下载箭头、加号等)的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
评论 0
收藏 0
赞 0
分享
纯css实现多级折叠菜单折叠树效果
这篇文章主要介绍了纯css实现多级折叠菜单折叠树效果,运用checkbox的checked值来判断下级栏目是否展开,通过css3选择器提供的checked伪类来实现此效果,感兴趣的朋友参考下吧
评论 0
收藏 0
赞 0
分享
CSS Grid 网格布局全解析
这篇文章主要介绍了CSS Grid 网格布局全解析的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
评论 0
收藏 0
赞 0
分享
css flex 弹性布局详解
这篇文章主要介绍了css flex 弹性布局详解的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
评论 0
收藏 0
赞 0
分享
CSS3 二级导航菜单的制作的示例
这篇文章主要介绍了CSS3 二级导航的制作的示例的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
评论 0
收藏 0
赞 0
分享
使用css禁用input、checkbox、select等html控件实现disable效果
这篇文章主要介绍了使用css禁用input、checkbox、select等html控件实现disable效果,需要的朋友可以参考下
评论 0
收藏 0
赞 0
分享
查看更多
网络赚钱
更多
男子凭一张八卦图忽悠60多亲友发红包 短短1小时内获得300元红包
漂洋过海坑死你 海淘代购名为国际大牌实为国产的山寨货
网赚之谈:如何用最少的钱做最大化的网站推广
巴西世界杯复盘:七大移动营销案例图文解析
SEO都有哪些赚钱的方式? SEO的十种赚钱方式详解
在校大学生利用网络可以做什么?在校大学生利用网络赚钱方式介绍
站长故事
更多
从地图到苹果6!盘点苹果产品的四大败笔
一个个人站长的网站推广运营核心销策略
浅谈:一个草根站长的服装论坛赚钱经验
八零后站长们:我们都是“囧”的一代
PHPWind
从5元到500万,我的创业历程