常用的图片居中HTML实现兼容较好

最新推荐文章于 2021-06-21 00:08:02 发布
最新推荐文章于 2021-06-21 00:08:02 发布
阅读量509 收藏
点赞数
分类专栏： 前端技巧 文章标签： div+css 布局

22:20 2011-5-15<Div>垂直居中及容器内图片垂直居中的CSS解决方法
作者:vinci 日期:2007-05-09

Div与CSS布局，最让人头疼的就是容器内的东西如何垂直居中的问题，我在做站时也遇到，查了一下资料，总结出以下居中办法，兼容IE与及Firefox


方法一
 HTML代码
<style type="text/css">
<!--
* {margin:0;padding:0}
div {
  width:500px;
  height:500px;
  border:1px solid #666;
  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%;
  }
-->
</style>
<div><p><img src="http://www.google.com/intl/en/images/logo.gif" /></p></div>

 
[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]

方法二
 HTML代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.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">
<!--
body {
  margin:0;padding:0
}
div {
  width:500px;
  height:500px;
  line-height:500px;
  border:1px solid #666;
  overflow:hidden;
  position:relative;
  text-align:center;
}
div p {
  position:static;
  +position:absolute;
  top:50%
}
img {
  position:static;
  +position:relative;
  top:-50%;left:-50%;
  vertical-align:middle
}
p:after {
  content:".";font-size:1px;
  visibility:hidden
}
-->
</style>
</head>
<body>
<div><p><img src="http://www.google.com/intl/en/images/logo.gif" /></p></div>
</body>
</html>

 
[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]

方法三
 HTML代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.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;
  line-height:500px;
  border:1px solid #666;
  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%;
  vertical-align:middle
}
-->
</style>
</head>
<body>
<div><p><img src="http://www.google.com/intl/en/images/logo.gif" /></p></div>
</body>
</html>

 
[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]

方法四（针对背景图片居中）
 HTML代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.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;border:1px solid #666;
  height:500px;
  background:url("http://www.google.com/intl/en/images/logo.gif") center no-repeat
}
-->
</style>
</head>
<body>
<div></div>
</body>
</html>
十三浪
关注
专栏目录
任意图片实现垂直居中的三种方法(兼容性还不错)
09-25
为了解决这一问题，作者分享了三种实现任意图片垂直居中的方法，并指出其中一种仅限于标准浏览器，而另外两种方法兼容性较好。下面详细说明每一种方法。 方法一：使用display:table和display:table-cell属性 这种...
爱分享 css控制图片垂直水平居中支持IE6、IE7、IE8、FF等…
suyuwen1的专栏
02-20 1429
这个问题其实在之前的table构架的网页里根本不是啥问题，因为table构架的网页，默认就是垂直居中显示。但是细心的朋友可能发现，在DIV构架的容器里面，图片默认都是left top显示的，对于水平居中，都是通用的做法，text-align:center; 但是对于垂直居中，可就大不一样了，对于非IE的主流浏览器操作起来用以下代码即可实现： display: table-cell;ve
html/css实现居中的几个常用方法
程序人生
11-07 1万+
以下总结了html/css实现居中的几个常用方法1. 文字垂直居中的方法line-height： 这个方法往往是将line-height和height属性设置为一样的值，可以达到文字上下居中的效果。如下：height:30px; line-height:30px;2. 文字水平居中text-align： 这种方法在div标签或者p标签等块集标签中使用，可以达到文字水平居中的效果。
html中移动端的图片怎么居中,移动端使用让图片或者div垂直居中
weixin_30778043的博客
06-04 374
1031MVCC和事务浅析转自 http://blog.csdn.net/sofia1217/article/details/50778906 关于MVCC浅析,有些难度http://xuebinbin212.blog.163 ...在SystemOut&period;log中发现HMGR0152W&colon; 检测到CPU 饥饿的消息 &lt&semi;转载&a...
图片水平居中兼容IE6、7、8和FF
程序员之家
09-27 631
图片等比缩放及水平居中兼容各种浏览器http://bbs.it-home.org/thread-16748-1-1.html .box {         display: table-cell;         vertical-align:middle;         text-align:center;         *display: block;         *f
html有多少种居中方式,html常用的几种居中方法
热门推荐
weixin_32068473的博客
06-21 2万+
前言本篇文章主要介绍如何使用 html+css 实现元素的的水平与垂直的居中效果，这是我们在网页编码过程中经常遇到的问题。布局分类一、水平居中布局效果图：1.inline-block+text-align利用 display:inlin-block 将元素设置为具有文本元素的性质，然后利用文本对齐属性 text-align 来设置对齐方式，center 即为水平对齐2.定位 + transform...
移动WEB端单页面图片居中
11-04
在移动Web端开发中，实现图片居中是一项基础但重要的任务。这主要涉及到HTML5和CSS3的相关技术，尤其对于初学者来说，掌握这些技巧能够提升网页设计的灵活性和用户体验。下面将详细介绍如何使图片在手机端上下左右...
css 水平居中，垂直居中，自适应宽度的代码
09-25
实现垂直居中的方法有很多，这里介绍一种简单且兼容性较好的方法——使用Flexbox布局。 ##### 1. Flexbox布局简介 Flexbox是一种全新的布局模式，它使得在任何方向上的对齐和伸缩都非常容易，特别适合响应式设计。...
JQ与CSS两种方式实现背景图片随窗口改变，兼容多浏览器
07-18
本文将详细介绍如何利用这两种技术来实现背景图片的自适应和居中。 首先，我们来看看CSS的方法。CSS3引入了新的背景属性，如`background-size`和`background-position`，使得背景图片可以灵活地适应容器。为了使...
4个简单图片垂直居中
06-20
在网页设计中，让元素（如图片）在容器内垂直居中是一项常见的需求，而这也是CSS布局中的一个挑战。...记住，实践是检验真理的唯一标准，动手尝试并理解每个示例的工作原理，将有助于你更好地掌握图片垂直居中的技巧。
1727008980062_36899042-cccb-455e-a366-ade300382e2a.mp3
09-22
1727008980062_36899042-cccb-455e-a366-ade300382e2a.mp3
基于Java和Lua的美食社交APP设计源码
09-22
本项目是基于Java和Lua开发的美食社交APP，包含92个文件，其中包括80个Java源代码文件、4个XML配置文件、2个PNG图像文件、2个Lua脚本文件、1个LICENSE文件、1个Markdown文档文件和1个YAML配置文件。此外，还有1个SQL文件。该项目旨在为用户提供一个便捷、高效的美食社交平台，支持美食分享、社交互动、活动组织等功能，以提升用户体验和社区活跃度。
模数转换器(ADC)技术解析及应用指南
09-22
内容概要：本文全面介绍了模数转换器(ADC)的相关知识和技术，包括ADC的基本原理、关键技术参数、不同类型ADC的工作方式及其应用领域。并通过生动的比喻解释ADC的概念，强调其在日常生活中的实际应用，并提供了选型指南以及对未来发展方向进行了预测。 适用人群：具备一定模拟电子基础知识的研发人员及电子工程专业师生。 使用场景及目标：指导相关人员正确理解和选用ADC，并提升对最新发展的认知。适用于工业、消费电子、汽车电子、通讯和医疗器械等行业。 阅读建议：读者应重点学习ADC的关键指标及各参数间的关联性，并尝试联系具体的应用场景来加深理解。此外还推荐读者扩展学习相关设计实例和技术文章，以更好地吸收和运用知识内容。
基于微信小程序的碎片化驾考论文.docx
09-22
基于微信小程序的碎片化驾考论文
R语言入门指南_r-book.zip
09-22
R语言入门指南_r-book
小程序&模版&租赁行业&电器租赁小程序（源码+截图+源码导入教程和视频）.zip
09-22
小程序&模版&租赁行业&电器租赁小程序（源码+截图+源码导入教程和视频）.zip
Ｒ语言相关资料_R.zip
最新发布
09-22
Ｒ语言相关资料_R
基于Javascript的程序员工具大全设计源码
09-22
本项目是基于Javascript开发的程序员工具大全，包含159个文件，其中包括69个PNG图像文件、47个Markdown文档文件、20个JavaScript脚本文件、11个JPG图像文件、3个CSS样式表文件、1个gitattributes文件、1个gitignore文件、1个LICENSE文件和1个ICO图标文件。此外，还有1个SVG矢量图文件。该项目旨在为程序员提供一个便捷、高效的工具集合，包括代码片段管理、在线调试、文档查询等功能，以提升开发效率和编程体验。
E2021014（资料+论文）基于单片机的指纹密码锁系统.zip
09-22
主要实现功能： 1.系统的基本功能，要求能够对指纹进行录入、识别和删除，能够实现指纹识别成功开锁功能。并设有4*4按键键盘，实现指纹录入、密码修改和特殊功能。 2. 根据功能要求及性价比，选择STM32F103C8T6单片机。 3.合理选择元器件，完成功能按键键盘模块、时钟模块、指纹识别模块，LCD12864显示电路的设计。 4.设计出硬件电路原理图。搭建硬件电路，编写程序，进行系统调试。 资料包包含： 1-程序 2-原理图 3-原理图讲解视频 4-相关软件下载和教程 6-制作详解 7-焊接过程照片 8-芯片资料 9-实物操作说明 10-实物照片 11-元件清单 12-开题报告 13-任务书 14-参考论文 15-STM32视频教程 16-毕设管辩技巧 【必读】论文音重原理与规避高重复率方法,doc 常见问题解答,doc 常用小知识.doc 答辩常见问题合集,txt 打开原理图的方法,txt
两种CSS方法实现图片垂直居中：div+绝对定位与自动居中
总结起来，这两种方法都可以实现图片的垂直居中，第一种方法通过CSS布局模拟表格单元格，适合需要兼容性较好的场景；而第二种方法则利用了CSS的现代特性，简洁易懂，但在某些低版本浏览器中可能不完全有效。在实际...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值