[收藏］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=gb2312" />

<title>一个div里面图片垂直居中的例子</title>

<style type="text/css">

<!--

div {

width:120px;

height:100px;

border:1px solid #ccc;

overflow:hidden;

position:relative;

display:table-cell;

text-align:center;

vertical-align:middle;

background-color:blue;

}

div span {

position:static;

+position:absolute;

top:50%;

}

img {

position:static;

+position:relative;

top:-50%;left:-50%;

}

-->

</style>

</head>

<body>

<div>

<span>

<img src=http://images.sohu.com/uiue/sohu_logo/beijing2008/sohu.gif>

</span>

</div>

</body>

</html>

相关文章：

猜你喜欢

相关资源

网页设计中用VMiddleImg来达到图片居中裁切效果(图)下载 2023-03-19
162100数字DIV非图片验证码 v3.0下载 2023-02-11
啊估收藏夹网站系统(记事便笺＋网站收藏) v2.2.1下载 2022-12-28
全新DIV+CSS+JS实现支持热点的中国地图下载 2022-12-21

相似解决方案

热门标签

Java Python linux javascript Mysql C# Docker 算法前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库数据结构大数据 js 机器学习微服务 Android Go 程序员面试 JVM ASP.net core 云原生人工智能后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习多线程 React 架构 devops 爬虫云计算 Spring Boot LeetCode