<!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>
<!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>
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default3.aspx.cs" Inherits="Default3" %>
<!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 runat="server">
<title>未命名頁面</title>
<script type="text/javascript">
function setCenter(Xelement)
{
var parent=Xelement.parentNode;
parent.style.position="relative";
Xelement.style.position="absolute";
var left=(parent.clientWidth-Xelement.clientWidth)/2;
var top=(parent.clientHeight-Xelement.clientHeight)/2;
Xelement.style.left=left+"px";
Xelement.style.top=top+"px";
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div id="picbox" style="width: 200px; height: 200px; background: #ccc;">
<img id="img1" src="images/c7.jpg" alt="" onload="setCenter(this)" />
</div>
</form>
</body>
</html>
分享到:
相关推荐
DIV+CSS 图片垂直居中效果
一个图片居中的CSS示例,兼容IE6,7,8和FF,opera,safari
css图片垂直居中方法
图片水平垂直居中的css代码,个人随便写点,请大家不要骂我啊
图片 CSS垂直居中图片 CSS垂直居中
DIV+CSS 图片居中效果 兼容 IE FF。。等浏览器
css图片垂直居中代码,超级简单,css只有二行,其中css最核心的地方用到 position,transform,解决以往代码多,或用table来居中的麻烦。
在曾经的 淘宝UED 招聘 中有这样一道题目: “使用纯CSS实现+未知尺寸的图片(但高宽都小于200px)在200px的正方形容器中水平和垂直居中。” 当然出题并不是随意,而是有其现实的原因,垂直居中是淘宝工作中最常遇到的...
用CSS来实现img图片在DIV层中上下左右都居中,并且图片等比例缩放。很实用的
以前以为必须要JS才能控制图片上下居中的,现在才发现原来css也有这个本事 一半只有table,默认图片才会上下居中,现在只需要加几行css即可实现,高级。使用方法简单:图片外围包含两个容器即可,并设置图片宽度...
DIV+CSS上下左右绝对居中
本CSS教程提供了两种对齐方式即垂直居中对齐和...CSS使图片垂直居中的代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><...
未知大小的图片 垂直居中,水平居中,纯CSS。兼容主流浏览器。
NULL 博文链接:https://highfly-s.iteye.com/blog/1878910
js+CSS 图片等比缩小并垂直居中实现代码.docx
NULL 博文链接:https://gucaihe.iteye.com/blog/1465144
图片,宽度和高度居中对齐 css水平居中4种方式
兼容ie6、ie7、ie8、ie9、Chrome、Firefox等主流浏览器,轻量简洁容易上手使用,是web开发、学习的必备之选。
图片垂直居中的css+div代码的几种方法编写
本文实例讲述了CSS实现同一行的图片和文字垂直居中对齐的方法。分享给大家供大家参考。具体分析如下: 有些朋友会发现,如果一行内容中有图片有文字的话,文字往往会自动的底部对齐,影响美观,那如何让它们相对于...