.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://pics.taobao.com/bao/album/promotion/taoscars_180x95_071112_sr.jpg"/>
</div>
原文:
http://www.planabc.net/2008/05/26/img_vertical_center_solution/
- 浏览: 888068 次
- 性别:
- 来自: 杭州
-
最新评论
-
zj7243886:
非常感谢,这东西解决我的问题;谢谢你的分享
Linux 安装 jpeg-6b 错误 ./libtool 命令未找到 -
丶Sk.Mabon:
能让html也绕过吗。。机房限制很悲剧
绕过 <?PHP exit(’Access Denied’); ?> 限制 -
丶Sk.Mabon:
请教gzip.php 的写法。万分感谢!
apache 开启 gzip -
hyxj1220:
火狐中单纯的定义这样的样式,貌似不行,必须要让容器浮动
英文长文本换行CSS -
逆水寒龙:
太好了,正好用上,谢谢博主共享
Asp.net 将中文汉字转换成拼音首字和拼音全拼
相关推荐
首先,我们可以使用CSS的Flexbox布局来实现图片的水平垂直居中。Flexbox是一个强大的容器模型,它允许我们轻松地调整子元素的布局、对齐和分布,而无需复杂的定位技巧。 1. 创建一个包含图片的容器: ```html `...
在网页设计中,"DIV+CSS 图片垂直居中效果"是一个常见的布局需求,它涉及到CSS的盒模型、定位和Flexbox或Grid等现代布局技术。以下是对这一主题的详细阐述: 1. **基础概念** - **DIV**:HTML中的`<div>`元素是一...
对于固定高度的容器,可以使用绝对定位实现图片垂直居中。设置容器的`position: relative;`,图片的`position: absolute;`,`top: 50%;`,再通过负的`transform`值让图片上移自身高度的一半,达到居中效果: ```...
本文将深入探讨“图片垂直居中样式”的实现方法,通过分析给定的代码片段,详细解释其中涉及的关键CSS技术点,以及如何在实际项目中应用这些技巧。 ### 核心知识点解析 #### 1. 相对定位与绝对定位的结合使用 在...
在网页设计中,让元素(如图片)在容器内垂直居中是一项常见的需求,而这也是CSS布局中的一个挑战。...记住,实践是检验真理的唯一标准,动手尝试并理解每个示例的工作原理,将有助于你更好地掌握图片垂直居中的技巧。
在网页设计中,将图片水平垂直居中于一个DIV元素是常见的需求,这涉及到CSS布局技术的运用。本文将深入探讨如何实现这个效果,并提供相关的源码示例。 首先,我们要明白CSS中的定位机制,包括静态定位、相对定位、...
以上就是使用CSS(特别是Flexbox和Grid布局)以及JavaScript实现图片在div中垂直/水平居中的方法。这些技巧不仅适用于图片,还可以应用于其他类型的元素,提高了网页布局的灵活性和可维护性。在实际项目中,应根据...
"div+css图片垂直居中"是这个话题的核心,它涉及到CSS布局和浏览器兼容性问题,特别是对于Internet Explorer(IE)和其他现代浏览器的处理差异。下面将详细阐述如何实现这一目标。 1. **基本原理**: CSS中的定位...
在网页设计中,让图片垂直居中是一项常见的需求,尤其在布局多样性和响应式设计日益重要的今天。"图片垂直居中"是一个关于CSS布局技术的知识点,...通过实践这些代码,你可以更好地理解和掌握图片垂直居中的实现技巧。
以上就是关于使用CSS设置未知尺寸图片在容器中水平和垂直居中的方法。这些技术不仅适用于图片,也广泛应用于其他需要居中显示的元素。通过源码和工具的实践,你可以更好地理解和掌握这些技巧,从而提高网页设计的...
在网页设计中,图片的垂直居中是一个常见的需求,尤其在构建美观且响应式的网站时。本文将深入探讨四种不同的CSS方法,用于实现图片在div容器内的垂直居中,每种方法都有其适用场景和独特之处。 ### 第一种方法:...
在讨论JSP页面中图片居中的问题时,首先需要掌握一些基础的CSS布局知识,包括display属性的使用、垂直居中的方法、margin属性的自动居中技巧以及W3C标准对页面渲染的影响。 当涉及到在div中居中一张图片时,CSS是...
在网页设计中,将图片垂直居中是一项常见的布局需求。当图片的高度未知时,实现垂直居中会增加一定的难度。本文将详细介绍几种不同浏览器下实现未知高度图片垂直居中的方法,并特别关注在IE浏览器中的表现。由于IE...
然后,为了让图片垂直居中,我们可以创建一个内联块级元素包裹图片,并使用负的`margin`来调整位置: ```css .container .image-wrapper { display: inline-block; vertical-align: middle; margin: -50%; /* ...
下面总结了一下,曾经使用过的几种方法来使图片垂直居中,除了第一种方法只限于标准浏览器外,另外两种方法的兼容性还不错。 方法一 将外部容器的显示模式设置成display:table,这个设置的意思不用多说了吧… img...
总结,本文提供的CSS设置文字图片垂直居中的方法是一种简单实用的技巧,它利用了`display:inline-block`和`vertical-align:middle`的组合,以及辅助元素来达到目的。这种方法对于静态布局尤为适用,可以很好地满足...
在网页设计中,让图片或其他内容在`div`容器中垂直居中是一项常见的需求,尤其在跨浏览器兼容性方面,需要找到优雅且高效的方法。淘宝UED招聘中的一道题目提出了一个挑战:用纯CSS实现未知尺寸(但小于200px)的图片...
要使图片垂直居中,我们可以利用`position`属性和`transform`属性来实现。以下是一个示例代码: ```css #content { width: 303px; height: 404px; background: #F63; color: #000; font: 12px Arial,Helvetica...