兼容各种浏览器的Div 垂直居中

最新推荐文章于 2018-03-29 16:42:00 发布
原创 最新推荐文章于 2018-03-29 16:42:00 发布 · 161 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文提供了一种在网页布局中使图片垂直居中的方法。通过CSS样式设置，确保图片在div容器内能够准确地垂直居中显示。该示例使用了绝对定位和相对定位的组合来实现这一效果。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

<!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=gb2312" />
<title>div里面图片垂直居中的几个例子</title>
<style type="text/css">
<!--
* {margin:0;padding:0}
a img{ border:none;}
.Pic_Cell div{
   float:left;
   display:inline;
   width:160px;
   height:240px;
   background:#000ffd;
   margin:0 5px;
}
.Pic_Show{
   display:block;
   position:relative;
   width:150px;
   height:150px;
   line-height:150px;
   text-align:center;
   overflow:hidden;
}
.Pic_Show p {
   position:static;
   +position:absolute;
   top:50%;
   vertical-align:middle
}
.Pic_Show p img {
   position:static;
   +position:relative;
   top:-50%;
   left:-50%;
   vertical-align:middle
}
-->
</style>
</head>
<body> 
<div class="Pic_Cell">
     <div>
           <p class="Pic_Show"><a href=" http://www.9sky.com/"><img src=" http://mat1.qq.com/www/images/allskin/wmlogo.gif" alt="" /></a></p>
     <p style="height:25px; line-height:25px; text-align:center;">说明</p>
     <p style="height:25px; line-height:25px; text-align:center;">说明</p>
  </div>
  <div>
           <p class="Pic_Show"><a href=" http://www.9sky.com/"><img src=" http://mat1.qq.com/www/images/allskin/wmlogo.gif" alt="" /></a></p>
     <p style="height:25px; line-height:25px; text-align:center;">说明</p>
     <p style="height:25px; line-height:25px; text-align:center;">说明</p>
  </div>
  <div>
           <p class="Pic_Show"><a href=" http://www.9sky.com/"><img src=" http://mat1.qq.com/www/images/allskin/wmlogo.gif" alt="" /></a></p>
     <p style="height:25px; line-height:25px; text-align:center;">说明</p>
     <p style="height:25px; line-height:25px; text-align:center;">说明</p>
  </div>
  <div>
           <p class="Pic_Show"><a href=" http://www.9sky.com/"><img src=" http://mat1.qq.com/www/images/allskin/wmlogo.gif" alt="" /></a></p>
     <p style="height:25px; line-height:25px; text-align:center;">说明</p>
     <p style="height:25px; line-height:25px; text-align:center;">说明</p>
  </div>
  <div>
           <p class="Pic_Show"><a href=" http://www.9sky.com/"><img src=" http://mat1.qq.com/www/images/allskin/wmlogo.gif" alt="" /></a></p>
     <p style="height:25px; line-height:25px; text-align:center;">说明</p>
     <p style="height:25px; line-height:25px; text-align:center;">说明</p>
  </div>
  <div>
           <p class="Pic_Show"><a href=" http://www.9sky.com/"><img src=" http://mat1.qq.com/www/images/allskin/wmlogo.gif" alt="" /></a></p>
     <p style="height:25px; line-height:25px; text-align:center;">说明</p>
     <p style="height:25px; line-height:25px; text-align:center;">说明</p>
  </div>
  <div>
           <p class="Pic_Show"><a href=" http://www.9sky.com/"><img src=" http://mat1.qq.com/www/images/allskin/wmlogo.gif" alt="" /></a></p>
     <p style="height:25px; line-height:25px; text-align:center;">说明</p>
     <p style="height:25px; line-height:25px; text-align:center;">说明</p>
  </div>
  <div>
           <p class="Pic_Show"><a href=" http://www.9sky.com/"><img src=" http://mat1.qq.com/www/images/allskin/wmlogo.gif" alt="" /></a></p>
     <p style="height:25px; line-height:25px; text-align:center;">说明</p>
     <p style="height:25px; line-height:25px; text-align:center;">说明</p>
  </div>
  <div>
           <p class="Pic_Show"><a href=" http://www.9sky.com/"><img src=" http://mat1.qq.com/www/images/allskin/wmlogo.gif" alt="" /></a></p>
     <p style="height:25px; line-height:25px; text-align:center;">说明</p>
     <p style="height:25px; line-height:25px; text-align:center;">说明</p>
  </div>
  <div>
           <p class="Pic_Show"><a href=" http://www.9sky.com/"><img src=" http://mat1.qq.com/www/images/allskin/wmlogo.gif" alt="" /></a></p>
     <p style="height:25px; line-height:25px; text-align:center;">说明</p>
     <p style="height:25px; line-height:25px; text-align:center;">说明</p>
  </div>
  <div>
           <p class="Pic_Show"><a href=" http://www.9sky.com/"><img src=" http://mat1.qq.com/www/images/allskin/wmlogo.gif" alt="" /></a></p>
     <p style="height:25px; line-height:25px; text-align:center;">说明</p>
     <p style="height:25px; line-height:25px; text-align:center;">说明</p>
  </div>
  <div>
           <p class="Pic_Show"><a href=" http://www.9sky.com/"><img src=" http://mat1.qq.com/www/images/allskin/wmlogo.gif" alt="" /></a></p>
     <p style="height:25px; line-height:25px; text-align:center;">说明</p>
     <p style="height:25px; line-height:25px; text-align:center;">说明</p>
  </div>
  <div>
           <p class="Pic_Show"><a href=" http://www.9sky.com/"><img src=" http://mat1.qq.com/www/images/allskin/wmlogo.gif" alt="" /></a></p>
     <p style="height:25px; line-height:25px; text-align:center;">说明</p>
     <p style="height:25px; line-height:25px; text-align:center;">说明</p>
  </div>
  <div>
           <p class="Pic_Show"><a href=" http://www.9sky.com/"><img src=" http://mat1.qq.com/www/images/allskin/wmlogo.gif" alt="" /></a></p>
     <p style="height:25px; line-height:25px; text-align:center;">说明</p>
     <p style="height:25px; line-height:25px; text-align:center;">说明</p>
  </div>
  <div>
           <p class="Pic_Show"><a href=" http://www.9sky.com/"><img src=" http://mat1.qq.com/www/images/allskin/wmlogo.gif" alt="" /></a></p>
     <p style="height:25px; line-height:25px; text-align:center;">说明</p>
     <p style="height:25px; line-height:25px; text-align:center;">说明</p>
  </div>
  <div>
           <p class="Pic_Show"><a href=" http://www.9sky.com/"><img src=" http://mat1.qq.com/www/images/allskin/wmlogo.gif" alt="" /></a></p>
     <p style="height:25px; line-height:25px; text-align:center;">说明</p>
     <p style="height:25px; line-height:25px; text-align:center;">说明</p>
  </div>
</div>
</body>
</html>
yushuir
关注
html中div文字垂直居中显示,CSS文本和div垂直居中方法总结
weixin_39654903的博客
06-11 1168
在样式布局中，我们经常碰到需要将元素居中。通过css实现元素的水平居中较为简单：对文本，只需要对其父级元素设置text-align: center;，而对div等块级元素，只需要设置其left和right的margin值为auto。要实现元素的垂直居中，有人会想到css中的vertical-align属性，但是它只对拥有valign特性的元素才生效，例如表格元素中的、、等，而像、这样的元素是没有v...
div完全纯css自适应居中【兼容IE7+ Chrome FireFox 等】
山水间的漫步者
03-23 5299
从产品设计css一直做到linux运维的程序猿...  很多技术都是皮毛，各位见谅，只求和大家交流一点小技术，欢迎拍砖！ 1. 纯CSS，完全无需JS，主要就是借用了“万恶”的table..呵呵，如果各位觉得table还有点用的话，就可以尝试一下吧，“table反对党”请无视哈... 2. IE6没有测试，抱歉= =  DOM结构
css实现一个容器的水平垂直居中-兼容所有的浏览器
10-09
不同的浏览器对水平和垂直居中的不同体现，兼容所有浏览器的终极方法
div垂直居中兼容所有浏览器
weixin_34107739的博客
09-10 167
2019独角兽企业重金招聘Python工程师标准>>> ...
div水平垂直居中(兼容各浏览器)
web开发
08-24 328
实现div水平垂直居中（兼容各浏览器）： 1、当div的width和height已固定时， 用class=“div1”，不需要写id=“divId”，直接用css样式就可以实现水平垂直居中显示。 2、当div的width和height不固定时 , 用class=“div2”，需要写id=“divId”，并加入js就可以实现水平垂直居中显示。 具体代码如下： &lt;!...
DIV 居中兼容浏览器
zhangliang1819的专栏
09-29 411
<br /><%@ page language="java" import="java.util.*" pageEncoding="gbk"%><br /><%<br />//当前项目的根目录  例如  "/Test "<br />String path = request.getContextPath();<br /> <br />String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServe
div 居中，浏览器兼容性
weixin_34191845的博客
03-29 114
2019独角兽企业重金招聘Python工程师标准>>> ...
使用css实现div垂直居中的示例
09-25
在网页设计中，让元素居中是常见的需求，特别是对于`div`这样的块级元素，垂直居中有时会显得较为复杂。本示例将详细解释如何使用CSS来实现`div`元素的垂直居中。 首先，我们要理解CSS布局的基本概念。在网页中，...
DIV以及图片水平垂直居中兼容多种浏览器
09-22
在网页设计中，让元素（如DIV或图片）在页面上水平垂直居中是一项常见的需求。这有助于确保用户无论在何种设备或浏览器上查看页面，都能获得一致的视觉体验。以下将详细介绍两种纯CSS方法以及一种JavaScript辅助的...
CSS网页布局：div垂直居中的各种方法
09-27
CSS网页布局中，div元素的垂直居中是一个常见的需求，尤其在设计响应式网页时更为重要。虽然CSS的`vertical-align`属性适用于某些特定元素，如表格单元格，但对于div等块级元素，该属性并不起作用。因此，我们需要...
CSS设置DIV垂直居中的N种方法 兼容IE浏览器
09-27
以上就是实现CSS兼容IE浏览器的DIV垂直居中的多种方法。每种方法都有其适用场景和局限性，开发者可以根据项目需求和目标浏览器范围选择合适的技术。对于兼容性问题，还可以使用条件注释、Modernizr库或者工具如...
DIV水平垂直居中 兼容多种浏览器
xiwu1616的专栏
05-08 8751
第一种：全CSS控制，层漂浮（适用于做登陆页面） My JSP #divcenter{ position:absolute;/*层漂浮*/ top:50%; left:50%; width:300px; height:300px; mar
CSS布局——简洁、兼容性强的垂直水平居中方案
小狼驿站
06-24 1803
1、absolute，需要知道居中元素的宽与高 charset="utf-8" /> type="text/css"> body{ background-color: goldenrod; margin: 0; padding:
DIV+CSS居中问题与兼容技巧总结
Hi我叫小明的博客
01-17 345
最近在做前端网页的美化，遇到很多问题，没办法，谁叫俺是小白一个 其中当初最让我头疼的就是元素的各种居中了，头大头大 在网上找了好多大大们的文章研究了一番，总算弄明白一点 把找到的资料整理了一下，供小伙伴儿们参考参考 有不对的地方有望指正 1、 FF下给 div 设置 padding 后会导致 width 和 height 增加、 但IE不会.(可用!important解决) 2、 居中问题.　
div自动适应浏览器窗口水平和垂直居中
thewebcode
11-07 584
&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt; &lt;head&gt; &lt;met
中文疾病诊断数据集（百万条），可用于中国人疾病分析、疾病诊断
08-19
资源下载链接为： https://pan.quark.cn/s/056be54e94fa 中文疾病诊断数据集（百万条），可用于中国人疾病分析、疾病诊断。（最新、最全版本！打开链接下载即可用！）
【计算机视觉】基于立体视觉的3D目标检测框架优化：联合2D边界框与实例深度估计的高效多类别检测系统设计（含详细代码及解释）
最新发布
08-19
内容概要：这篇论文提出了一种基于立体视觉的3D目标检测框架，核心创新包括直接实例深度估计方法、自适应空间特征聚合模块。该框架仅用左图像生成联合2D边界框并预测3D框中心深度，通过减弱背景点影响并整合重要实例特征，提高了3D检测的精度和效率。相比现有方法，该框架在KITTI基准测试上表现出色，实现了更高的检测精度（68.7% AP）和更快的推理速度（8.5 FPS）。论文还详细介绍了框架的核心模块实现，如实例深度估计网络、自适应空间特征聚合模块以及完整的立体3D检测框架，并通过实验验证了各模块的有效性。 适合人群：从事计算机视觉、自动驾驶或机器人领域的研究人员和技术开发者，尤其是对3D目标检测、立体视觉感兴趣的从业者。 使用场景及目标：①提高3D目标检测精度和效率；②研究立体视觉在3D检测中的应用；③探索深度估计和特征聚合的新方法；④应用于自动驾驶、机器人导航等实际场景。 其他说明：论文不仅提供了理论分析，还给出了详细的代码实现，便于读者理解和复现。该框架在KITTI数据集上进行了充分验证，证明了其在多类别3D检测任务中的优越性能。此外，论文还讨论了现有方法的局限性，并提出了针对性的解决方案。
兼容多浏览器的图片垂直居中CSS技巧
- div垂直居中：确保一个`<div>`元素在垂直方向上相对于其父容器居中。 通过结合上述CSS技巧，可以创建出一个兼容性良好的图片居中示例。示例代码应包含所有必要的CSS规则，并且在测试时应涵盖各种浏览器和其各个...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值