<!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的盒模型、定位和Flexbox或Grid等现代布局技术。以下是对这一主题的详细阐述： 1. **基础概念** - **DIV**：HTML中的`<div>`元素是一...
要使图片居中，可以设置网格容器的`align-items`和`justify-items`属性都为`center`： ```css .container { display: grid; align-items: center; justify-items: center; } ``` 3. **绝对定位** 对于非...
图片水平垂直居中的css代码，个人随便写点，请大家不要骂我啊
在处理图片居中问题时，通常会用到相对定位和绝对定位的组合。相对定位让元素相对于其正常位置进行偏移，而绝对定位则让元素相对于最近的非 static 定位祖先元素定位。 实现图片水平垂直居中的方法有多种，以下是几...
本篇文章将深入探讨如何利用CSS实现图片的垂直居中效果。 首先，我们来看几种常见且实用的CSS方法： 1. **Flexbox布局**： Flexbox是CSS3引入的一种新的布局模式，特别适合处理容器内元素的对齐问题。要使图片在...
通常，Summernote默认的样式可能并不包括图片居中这一选项。描述中提到的"本身不具有图片居中显示"意味着在原生的Summernote配置下，插入的图片会按照其HTML属性（如float或display）来定位，而不是居中对齐。为了...
在"VMiddleImg图片居中裁切效果"的实现中，开发者可能结合了以上所述的CSS属性和技术，同时考虑到旧版本IE浏览器的兼容性问题，可能还使用了条件注释、CSS Hack或者JavaScript库（如jQuery）来实现跨浏览器的支持。...
图片 CSS垂直居中图片 CSS垂直居中
DIV+CSS 图片居中效果 兼容 IE FF。。等浏览器
在网页设计中，"DIV+CSS上下左右绝对居中"是一个常见的布局需求，尤其是在构建响应式网站时。这个主题涉及到CSS（层叠样式表）的布局技巧，它可以帮助元素在不同屏幕尺寸下都能保持在容器的中心位置。下面将详细探讨...
JS+CSS 实现图片等比缩小并垂直居中 在网页开发中，图片的缩放和垂直居中是非常常见的需求，而本文将介绍使用 JS+CSS 来实现图片等比缩小并垂直居中的代码。 首先，在 HTML 中，我们需要定义一个容器元素 `...
首先，我们可以使用CSS的Flexbox布局来实现图片的水平垂直居中。Flexbox是一个强大的容器模型，它允许我们轻松地调整子元素的布局、对齐和分布，而无需复杂的定位技巧。 1. 创建一个包含图片的容器： ```html `...
总的来说，要让Summernote的图片居中显示，可以通过CSS、修改JS源码、自定义按钮或使用扩展插件等方式实现。根据项目需求和你的技术水平，可以选择最适合的方法。请务必注意在修改源码时备份原有文件，以便于后续...
css图片垂直居中代码，超级简单，css只有二行，其中css最核心的地方用到 position，transform，解决以往代码多，或用table来居中的麻烦。
在网页设计中，让图片居中是一项常见的需求，尤其考虑到浏览器的兼容性问题，因为不同的浏览器可能对CSS的解析方式存在差异。这个示例提供的是一种跨浏览器的解决方案，旨在确保图片在IE6、IE7、IE8以及Firefox、...
在曾经的 淘宝UED 招聘 中有这样一道题目： “使用纯CSS实现+未知尺寸的图片(但高宽都小于200px)在200px的正方形容器中水平和垂直居中。” 当然出题并不是随意，而是有其现实的原因，垂直居中是淘宝工作中最常遇到的...
用CSS来实现img图片在DIV层中上下左右都居中，并且图片等比例缩放。很实用的
以前以为必须要JS才能控制图片上下居中的，现在才发现原来css也有这个本事 一半只有table，默认图片才会上下居中，现在只需要加几行css即可实现，高级。使用方法简单：图片外围包含两个容器即可，并设置图片宽度...
本篇文章将深入探讨如何利用`DIV+CSS`实现`DIV`的居中布局。 首先，我们要理解`<div>`元素。`<div>`是“division”的缩写，代表一个区域或区块，在HTML中用于组合其他元素，是构建网页布局的基础。通过设置`<div>`...