注：收藏于蓝色（http://bbs.blueidea.com/thread-2666987-1-3.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" />
<meta http-equiv="Content-Language" content="zh-CN" />
<meta name="Keywords" content="" />
<meta name="Description" content="" />
<title>图片居中</title>
<style type="text/css">
*{padding:0; margin:0;}
.out {width:200px; height:200px;line-height:200px; border:1px solid #ccc; overflow:hidden; position:relative; text-align:center; margin:0 auto; }
.out p { position:static; +position:absolute; top:50%; vertical-align:middle }
.out p img { position:static; +position:relative; top:-50%;left:-50%; width:120px; height:120px;vertical-align:middle; }
</style>
</head>
<body>
<div class="out"><p><img src="info.jpg"/></p></div>
</body>
</html>
仅仅收藏
- 大小: 12.9 KB
分享到：
相关推荐
在网页设计中，让图片水平垂直居中是一个常见的需求，特别是在构建响应式布局或需要保持元素在不同屏幕尺寸下居中的场景。本文将详细介绍如何使用简洁的代码来实现这一目标，适用于各种现代浏览器。 首先，我们可以...
在网页设计中，让图片垂直居中是一项常见的需求，它能...通过阅读提供的文本文件"图片垂直居中2.txt、图片垂直居中3.txt、图片垂直居中1.txt、图片垂直居中4.txt"，你可以找到更多示例和解释，深入了解每种方法的细节。
在网页设计中，"DIV+CSS 图片垂直居中效果"是一个常见的布局需求，它涉及到CSS的盒模型、定位和Flexbox或Grid等现代布局技术。以下是对这一主题的详细阐述： 1. **基础概念** - **DIV**：HTML中的`<div>`元素是一...
要使图片垂直居中，可以创建一个包含图片的容器，并设置以下样式： ```css .container { display: flex; justify-content: center; /* 水平居中 */ align-items: center; /* 垂直居中 */ } ``` 2. **CSS Grid**...
对于固定高度的容器，可以使用绝对定位实现图片垂直居中。设置容器的`position: relative;`，图片的`position: absolute;`，`top: 50%;`，再通过负的`transform`值让图片上移自身高度的一半，达到居中效果： ```...
本文将深入探讨“图片垂直居中样式”的实现方法，通过分析给定的代码片段，详细解释其中涉及的关键CSS技术点，以及如何在实际项目中应用这些技巧。 ### 核心知识点解析 #### 1. 相对定位与绝对定位的结合使用 在...
任意图片在div里的垂直居中！
在这个"4个简单图片垂直居中"的案例中，我们将探讨几种主流的CSS策略来解决这个问题。 1. **Flexbox布局**： Flexbox是CSS3引入的一种新的布局模式，特别适合处理容器内元素的对齐问题。通过设置`display: flex`，...
本文将详细探讨如何实现图片在div层的居中，并着重解决垂直居中这一相对复杂的任务，同时考虑浏览器的兼容性问题。 首先，让我们了解基本的CSS布局属性，它们对于实现图片居中至关重要。`margin: auto` 是一种简单...
以上就是实现图层中图片垂直水平居中的几种常见CSS方法。根据实际项目需求和浏览器兼容性，选择合适的方法。在实践过程中，还可以结合媒体查询（media queries）来确保在不同屏幕尺寸下仍能保持良好的居中效果。
在处理图片居中问题时，通常会用到相对定位和绝对定位的组合。相对定位让元素相对于其正常位置进行偏移，而绝对定位则让元素相对于最近的非 static 定位祖先元素定位。 实现图片水平垂直居中的方法有多种，以下是几...
"js按比例缩放图片且垂直居中显示图片"这个主题涉及到的是使用JavaScript技术来处理图片的尺寸调整和布局定位，使得图片无论在何种分辨率或屏幕尺寸下都能保持良好的视觉效果。这里我们将详细探讨这一技术实现的原理...
明锋工作室整理常用资料。本次资料是一个自动居中插件，只要设定div长度和高度，其中的图片会自动铺满容器并且自动居中。很简单好用。并且该自动居中插件支持IE6、IE7、IE8、IE9、IE10、CHROME、FIREFOX、OPERA。
这种方法适用于单行文字，但是在 Internet Explorer 6 及以下版本中，不支持对图片设置垂直居中。 2. 多行未知高度文字的垂直居中 对于多行文字，可以使用 padding 属性设置上下的 padding 值相同，以实现垂直居中...
δ知大小的图片在已知容器中的垂直居中和水平居中，一直是困扰大家的问题，今天西西带给大家一个简单的实现办法，详见css文件，此代码兼容各个浏览器，源码库推荐下载！
在网页设计中，将图片在div中垂直和水平居中是一项常见的需求，这涉及到CSS布局技术的运用。本文将深入探讨如何使用最简单的方法来实现这个目标，同时也会涉及JavaScript（JS）的一些特效，尽管在描述中没有明确指出...
本CSS教程提供了两种对齐方式即垂直居中对齐和...CSS使图片垂直居中的代码： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><...
图片 CSS垂直居中图片 CSS垂直居中
"div+css图片垂直居中"是这个话题的核心，它涉及到CSS布局和浏览器兼容性问题，特别是对于Internet Explorer（IE）和其他现代浏览器的处理差异。下面将详细阐述如何实现这一目标。 1. **基本原理**： CSS中的定位...