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

最新推荐文章于 2021-06-10 02:59:34 发布
最新推荐文章于 2021-06-10 02:59:34 发布
阅读量130 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yushuir/article/details/83007971
版权
<!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
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
html中div文字垂直居中显示,CSS文本和div垂直居中方法总结
weixin_39654903的博客
06-11 875
在样式布局中，我们经常碰到需要将元素居中。通过css实现元素的水平居中较为简单：对文本，只需要对其父级元素设置text-align: center;，而对div等块级元素，只需要设置其left和right的margin值为auto。要实现元素的垂直居中，有人会想到css中的vertical-align属性，但是它只对拥有valign特性的元素才生效，例如表格元素中的、、等，而像、这样的元素是没有v...
css实现一个容器的水平垂直居中-兼容所有的浏览器
10-09
不同的浏览器对水平和垂直居中的不同体现，兼容所有浏览器的终极方法
div垂直居中兼容所有浏览器
weixin_34107739的博客
09-10 131
2019独角兽企业重金招聘Python工程师标准>>> ...
div水平垂直居中(兼容各浏览器)
web开发
08-24 281
实现div水平垂直居中（兼容各浏览器）： 1、当div的width和height已固定时， 用class=“div1”，不需要写id=“divId”，直接用css样式就可以实现水平垂直居中显示。 2、当div的width和height不固定时 , 用class=“div2”，需要写id=“divId”，并加入js就可以实现水平垂直居中显示。 具体代码如下： &lt;!...
DIV 居中兼容浏览器
zhangliang1819的专栏
09-29 352
<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 81
2019独角兽企业重金招聘Python工程师标准>>> ...
html div图片垂直居中,css如何让img垂直居中
weixin_32251525的博客
06-10 445
img垂直居中方法有很多，其中就包括以下三种方法1.使用flex让img垂直居中在css中，我们可以使用flex去实现垂直居中，但是flex并不是一个很好的方法，现在很多浏览器并不支持flex，例如IE8,9。首先我们要先给托图片添加一个div，并且定义为宽度为100px，高度也是100px，并且给它定义一些基本的属性，其中我们把div中的display元素设置成flex，然后把另外一条添加ali...
DIV以及图片水平垂直居中兼容多种浏览器
09-22
在网页设计中，让元素（如DIV或图片）在页面上水平垂直居中是一项常见的需求。这有助于确保用户无论在何种设备或浏览器上查看页面，都能获得一致的视觉体验。以下将详细介绍两种纯CSS方法以及一种JavaScript辅助的...
使用css实现div垂直居中的示例
09-25
在网页设计中，让元素居中是常见的需求，特别是对于`div`这样的块级元素，垂直居中有时会显得较为复杂。本示例将详细解释如何使用CSS来实现`div`元素的垂直居中。 首先，我们要理解CSS布局的基本概念。在网页中，...
CSS教程之div垂直居中的多种方法
09-24
本文主要讲解了如何使用CSS实现div元素以及其中多行文本的垂直居中。首先，我们要明确CSS中的`vertical-align`属性并不能直接用于所有元素，它仅适用于表格单元格（如`<td>`）和其他具有`valign`特性的元素。对于`...
CSS网页布局：div垂直居中的各种方法
09-27
CSS网页布局中，div元素的垂直居中是一个常见的需求，尤其在设计响应式网页时更为重要。虽然CSS的`vertical-align`属性适用于某些特定元素，如表格单元格，但对于div等块级元素，该属性并不起作用。因此，我们需要...
CSS设置DIV垂直居中的N种方法 兼容IE浏览器
09-27
以上就是实现CSS兼容IE浏览器的DIV垂直居中的多种方法。每种方法都有其适用场景和局限性，开发者可以根据项目需求和目标浏览器范围选择合适的技术。对于兼容性问题，还可以使用条件注释、Modernizr库或者工具如...
DIV水平垂直居中 兼容多种浏览器
xiwu1616的专栏
05-08 8715
第一种：全CSS控制，层漂浮（适用于做登陆页面） My JSP #divcenter{ position:absolute;/*层漂浮*/ top:50%; left:50%; width:300px; height:300px; mar
div完全纯css自适应居中【兼容IE7+ Chrome FireFox 等】
山水间的漫步者
03-23 5241
从产品设计css一直做到linux运维的程序猿...  很多技术都是皮毛，各位见谅，只求和大家交流一点小技术，欢迎拍砖！ 1. 纯CSS，完全无需JS，主要就是借用了“万恶”的table..呵呵，如果各位觉得table还有点用的话，就可以尝试一下吧，“table反对党”请无视哈... 2. IE6没有测试，抱歉= =  DOM结构
CSS布局——简洁、兼容性强的垂直水平居中方案
小狼驿站
06-24 1753
1、absolute，需要知道居中元素的宽与高 charset="utf-8" /> type="text/css"> body{ background-color: goldenrod; margin: 0; padding:
div自动适应浏览器窗口水平和垂直居中
thewebcode
11-07 533
&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
基于JAVA的厨艺交流平台（Vue.js+SpringBoot+MySQL）
08-01
基于Vue.js和SpringBoot的厨艺交流平台是一个功能丰富的在线社区，旨在为烹饪爱好者提供一个分享和学习烹饪技巧的平台。该平台分为管理后台和用户网页端，支持管理员和普通用户两种角色。管理后台提供对菜谱分类、菜谱信息、食材信息、商品信息和美食日志模块的全面管理功能，包括添加、编辑、删除和查询等操作。用户网页端则为用户提供了一个友好的界面，可以浏览和搜索各种菜谱，查看食材和商品信息，发表自己的美食日志，与其他用户互动交流。整个平台采用现代化的前端技术和后端框架，保证了良好的用户体验和高效的数据处理能力。 演示录屏：https://www.bilibili.com/video/BV1uz42197zu 配套教程：https://www.bilibili.com/video/BV1pW4y1P7GR
层次分析法数学建模论文.doc
最新发布
08-01
层次分析法数学建模论文
操作系统原理试卷及参考答案(A).doc
08-01
操作系统原理试卷及参考答案(A)
解决Div+CSS浏览器兼容性问题的策略
- **垂直居中**：要实现div内容的垂直居中，可以使用`vertical-align: middle;`和`line-height`属性。设定与div相同高度的`line-height`，并确保内容不换行，可以达到垂直居中效果。 - **margin加倍问题**：在IE6...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值