[首页]
[文章]
[教程]
首页
Web开发
Windows开发
编程语言
数据库技术
移动平台
系统服务
微信
设计
布布扣
其他
数据分析
首页
>
Web开发
> 详细
CSS图片垂直居中方法整理集合 ！(常见问题解答)
时间：
2015-12-31 11:58:48
阅读：
133
评论：
0
收藏：
0
[点我收藏+]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <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> <div><p><img src="http://www.jb51.net/images/logo.gif" /></p></div>
提示：您可以先修改部分代码再运行
标准浏览器下另类方法:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <style type="text/css"> <!-- body { margin:0;padding:0 } div { width:500px; height:500px; line-height:500px; border:1px solid #ccc; overflow:hidden; position:relative; text-align:center; margin:auto } div p { position:static; +position:absolute; top:50% } img { position:static; +position:relative; top:-50%;left:-50%; width:276px; height:110px; vertical-align:middle } p:after { content:".";font-size:1px; visibility:hidden } --> </style> <div><p><img src="http://www.jb51.net/images/logo.gif"/></p></div>
提示：您可以先修改部分代码再运行
标准浏览器严格型申明下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <style type="text/css"> <!-- * {margin:0;padding:0} div { width:500px; height:500px; line-height:500px; border:1px solid #ccc; overflow:hidden; position:relative; text-align:center; } div p { position:static; +position:absolute; top:50%; vertical-align:middle } img { position:static; +position:relative; top:-50%;left:-50%; width:276px; height:110px; vertical-align:middle } --> </style> <div><p><img src="http://www.jb51.net/images/logo.gif" /></p></div>
提示：您可以先修改部分代码再运行
利用字体大小的方法：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <style type="text/css"> * {margin:0;padding:0;} div { width:500px;text-align:center;border:1px solid #f00;line-height:500px; height:500px;font-size:500px } *>div{ font-size:12px } div img { vertical-align:middle } </style> <div> <img src="http://www.jb51.net/images/logo.gif" /> </div>
提示：您可以先修改部分代码再运行
最简单当然是背景图片的方法拉。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <style type="text/css"> * {margin:0;padding:0;} div { width:500px;border:1px solid #f00; height:500px; background:url("http://www.jb51.net/images/logo.gif") center no-repeat } </style> <div> </div>
提示：您可以先修改部分代码再运行
CSS图片垂直居中方法整理集合 ！(常见问题解答)
原文：http://www.jb51.net/css/41444.html
踩
(
0
)
赞
(
0
)
举报
评论
一句话评论（
0
）
登录后才能评论！
分享档案
更多>
2021年09月23日 (328)
2021年09月24日 (313)
2021年09月17日 (191)
2021年09月15日 (369)
2021年09月16日 (411)
2021年09月13日 (439)
2021年09月11日 (398)
2021年09月12日 (393)
2021年09月10日 (160)
2021年09月08日 (222)
最新文章
更多>
2021/09/28 scripts
2022-05-27
vue自定义全局指令v-emoji限制input输入表情和特殊字符
2022-05-27
9.26学习总结
2022-05-27
vim操作
2022-05-27
深入理解计算机基础 第三章
2022-05-27
C++ string 作为形参与引用传递（转）
2022-05-27
python 加解密
2022-05-27
JavaScript-对象数组里根据id获取name，对象可能有children属性
2022-05-27
SQL语句——保持现有内容在后面增加内容
2022-05-27
virsh命令文档
2022-05-27
教程昨日排行
更多>
1.
list.reverse()
2.
Django Admin 管理工具
3.
AppML 案例模型
4.
HTML 标签列表（功能排序）
5.
HTML 颜色名
6.
HTML 语言代码
7.
jQuery 事件
8.
jEasyUI 创建分割按钮
9.
jEasyUI 创建复杂布局
10.
jEasyUI 创建简单窗口
友情链接
汇智网
PHP教程
插件网
关于我们
-
联系我们
-
留言反馈
- 联系我们:wmxa8@hotmail.com
© 2014
bubuko.com
版权所有
打开技术之扣，分享程序人生！
