一个div里面图片垂直居中的例子

源码如下：
<!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">
<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;
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>
</head>
<body>
<div>
<p><img src=https://yunqi-tech.oss-cn-hangzhou.aliyuncs.com/20080117140156958.gif /></p>
</div>
</body>
</html>

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

时间： 2024-10-11 22:31:06

一个div里面图片垂直居中的例子的相关文章

css 让div中图片垂直居中办法

在div 上设置上下面两个属性就可以 了  代码如下 复制代码 vertical-align:middle; display:table-cell; eg <div style="vertical-align:middle; display:table-cell; height:200px; width:160px;"> <img src="aaa.jpg" />

css position图片垂直居中的例子

固定高宽的容器中,图片垂直局中. 绿色容器是span,目的是使自己的左上角与容器中心点对齐.红色是具体图片,再次设置负值使自己的中心点和父容器的中心点重合,最终达到垂直局中的目的.

三款css div 图片垂直居中代码

本文章收集了三款css教程 div 图片垂直居中代码哦,他可以对div进行垂直居中同时也可以对图片垂直居中哦,好了下面我们来看看这款垂直居中实例代码吧. cssbox{  /* 非ie内核浏览器识别垂直居中 */  display:table-cell;  vertical-align:middle;  /* ie内核浏览器识别垂直居中 */  *display:block;  /* 约为高度的0.873,200*0.873 约为175 */  *font-size:175px;  text-a

jquery计算出left和top,让一个div水平垂直居中的简单实例_jquery

实例如下: if($("#cont1").css("position")!="fixed"){ $("#cont1").css("position","absolute"); var dw = $(window).width(); var ow = $("#cont1").outerWidth(); var dh = $(window).height(); var o

图片-弹出一个div，覆盖整个页面

问题描述 弹出一个div,覆盖整个页面 点击一张图片,弹出一个div,使弹出的div遮盖整个页面,怎么实现,求帮忙.谢谢了... 解决方案 如何让div覆盖整个页面? 解决方案二: 设置一个隐藏div,大小为页面大小,在img上添加一个点击事件,当触发点击事件的时候,把div的css样式,修改为可见状态即可 解决方案三: <img onclick="document.getElementById('lightbox').style.display='block'" alt=&qu

CSS解决图片垂直居中的方法

图片垂直居中是DIV+CSS布局中经常碰到的问题,下面就这个问题我们进行研究并给出一个解决方法! 目的是为了使用纯CSS实现未知尺寸的图片(但高宽都小于200px)在200px的正方形容器中水平和垂直居中. 难点在于两点: 1.垂直居中: 2.图片是个置换元素,有些特殊的特性. 至于如何解决,下面是一个权衡的相对结构干净,CSS简单的解决方法: .box {         /*非IE的主流浏览器识别的垂直居中的方法*/         display: table-cell;        

换行文字、未知宽高图片垂直居中完美解决方案

原文:换行文字.未知宽高图片垂直居中完美解决方案 垂直居中是一个历史悠久的大问题,要做到兼容所有浏览器少不了要花点时间,网上也流传了很多解决方案,但没发现比我现在用的方案更完美,至少在我的项目是如此. 项目中要用到垂直居中而碰到兼容性问题的,一般都是以下几种情况: 1.换行文字垂直居中 2.图片垂直居中 以上都是在固定宽高的容器里垂直居中,不然的话margin,padding便可实现. 解决垂直居中无非就从几个方面入手,利用行高等于容器高度,模拟表格单元格特性,定位,css3的display:b

用css实现图片垂直居中的使用技巧_经验交流

题目的难点在于两点:  垂直居中:   图片是个置换元素,有些特殊的特性.   至于如何解决,下面是一个权衡的相对结构干净,CSS简单的解决方法:  .box {    /*非IE的主流浏览器识别的垂直居中的方法*/    display: table-cell;    vertical-align:middle;    /*设置水平居中*/    text-align:center;    /* 针对IE的Hack */    *display: block;    *font-size: 1

网页制作实例：用CSS实现图片垂直居中方法

网页制作,用CSS实现图片垂直居中方法 <!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;