`
yunmoxue
  • 浏览: 289381 次
  • 性别: Icon_minigender_1
  • 来自: 郑州
社区版块
存档分类
最新评论

图片垂直居中

阅读更多
.box {/*非IE的主流浏览器识别的垂直居中的方法*/
display: table-cell;
vertical-align:middle;/*设置水平居中*/
text-align:center;/* 针对IE的Hack */
*display: block;*font-size: 175px;/*约为高度的0.873,200*0.873 约为175*/ 
*font-family:Arial;/*防止非utf-8引起的hack失效问题,如gbk编码*/ width:200px;height:200px;border: 1px solid #eee; 
}
.box img {/*设置图片垂直居中*/
vertical-align:middle;
} 


<div class="box">
    <img src="http://www.iteye.com/upload/logo/user/182238/9fbe4e47-8e32-3b8f-ad11-95c46a1d4b25.jpg?1261106665" border="0" />
</div>


IE6,Safari,Chrome,通不过.
分享到:
评论

相关推荐

    css图片垂直居中方法

    在网页设计中,让图片垂直居中是一项常见的需求,它能...通过阅读提供的文本文件"图片垂直居中2.txt、图片垂直居中3.txt、图片垂直居中1.txt、图片垂直居中4.txt",你可以找到更多示例和解释,深入了解每种方法的细节。

    DIV+CSS 图片垂直居中效果

    在网页设计中,"DIV+CSS 图片垂直居中效果"是一个常见的布局需求,它涉及到CSS的盒模型、定位和Flexbox或Grid等现代布局技术。以下是对这一主题的详细阐述: 1. **基础概念** - **DIV**:HTML中的`&lt;div&gt;`元素是一...

    网页图片垂直居中

    要使图片垂直居中,可以创建一个包含图片的容器,并设置以下样式: ```css .container { display: flex; justify-content: center; /* 水平居中 */ align-items: center; /* 垂直居中 */ } ``` 2. **CSS Grid**...

    4个简单图片垂直居中

    在这个"4个简单图片垂直居中"的案例中,我们将探讨几种主流的CSS策略来解决这个问题。 1. **Flexbox布局**: Flexbox是CSS3引入的一种新的布局模式,特别适合处理容器内元素的对齐问题。通过设置`display: flex`,...

    css图片垂直居中

    对于固定高度的容器,可以使用绝对定位实现图片垂直居中。设置容器的`position: relative;`,图片的`position: absolute;`,`top: 50%;`,再通过负的`transform`值让图片上移自身高度的一半,达到居中效果: ```...

    图片水平垂直居中

    在网页设计中,让图片水平垂直居中是一个常见的需求,特别是在构建响应式布局或需要保持元素在不同屏幕尺寸下居中的场景。本文将详细介绍如何使用简洁的代码来实现这一目标,适用于各种现代浏览器。 首先,我们可以...

    图片垂直居中样式

    本文将深入探讨“图片垂直居中样式”的实现方法,通过分析给定的代码片段,详细解释其中涉及的关键CSS技术点,以及如何在实际项目中应用这些技巧。 ### 核心知识点解析 #### 1. 相对定位与绝对定位的结合使用 在...

    CSS让图片垂直居中和底端对齐的代码

    本CSS教程提供了两种对齐方式即垂直居中对齐和...CSS使图片垂直居中的代码: &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;&lt;...

    div+css图片垂直居中

    "div+css图片垂直居中"是这个话题的核心,它涉及到CSS布局和浏览器兼容性问题,特别是对于Internet Explorer(IE)和其他现代浏览器的处理差异。下面将详细阐述如何实现这一目标。 1. **基本原理**: CSS中的定位...

    div的内容图片垂直居中代码(兼容多浏览器).rar

    在提供的"div的内容图片垂直居中代码(兼容多浏览器).rar"压缩包中,可能包含多种实现方式的示例代码,供开发者参考和学习。通过这些代码,你可以了解到如何在不同的浏览器环境下实现图片或内容的垂直居中,从而...

    jquery图片尺寸调整插件图片垂直居中自适应容器

    总结来说,"jQuery图片尺寸调整插件图片垂直居中自适应容器"是一个强大且实用的工具,它结合了jQuery的便利性和CSS布局的灵活性,为开发者提供了方便快捷地处理网页中图片展示问题的解决方案。通过深入理解这个插件...

    未知图片大小在div里可以垂直居中显示

    任意图片在div里的垂直居中!

    css图片垂直居中代码(css仅有二行)

    css图片垂直居中代码,超级简单,css只有二行,其中css最核心的地方用到 position,transform,解决以往代码多,或用table来居中的麻烦。

    JS实现图片垂直居中显示小结

    以上就是本文介绍的四种使用JavaScript实现图片垂直居中的方法。每种方法都有其特点和适用场景。绝对定位适合于已知尺寸的容器和内容;display: table方法则需要父容器和子容器都有一定的尺寸;vertical-align属性...

    CSS设置文字图片垂直居中的方法总结

    本文主要介绍了一种针对文字和图片垂直居中的方法,适用于静态布局。这个方法基于`display:inline-block`和`vertical-align:middle`属性,结合额外元素技巧来实现。 首先,我们需要理解`display:inline-block`属性...

    JQUERY图片自动垂直居中水平居中-支持IE678910/chrome/firefox/opera

    明锋工作室整理常用资料。本次资料是一个自动居中插件,只要设定div长度和高度,其中的图片会自动铺满容器并且自动居中。很简单好用。并且该自动居中插件支持IE6、IE7、IE8、IE9、IE10、CHROME、FIREFOX、OPERA。

    css图片垂直居中 css中如何实现图片垂直居中

    在曾经的 淘宝UED 招聘 中有这样一道题目: “使用纯CSS实现+未知尺寸的图片(但高宽都小于200px)在200px的正方形容器中水平和垂直居中。” 当然出题并不是随意,而是有其现实的原因,垂直居中是淘宝工作中最常遇到的...

    css实现图片垂直居中

    用CSS来实现img图片在DIV层中上下左右都居中,并且图片等比例缩放。很实用的

    图片垂直居中css写法兼容ie6

    不过,通过一些特殊的CSS技巧,我们可以实现兼容IE6的图片垂直居中效果。 首先,需要理解的是在IE6中实现垂直居中的基本原理。一种常用的方法是使用inline-block布局。这种方法的原理在于将图片及其容器设置为`...

Global site tag (gtag.js) - Google Analytics