- 浏览: 11336 次
最新评论
纯css实现未知大小的图片水平垂直居中的方法
- 博客分类:
- 技术杂绘
方法一: .box {
/*非IE的主流浏览器识别的垂直居中的方法*/
display: table-cell;
vertical-align:middle;
/*设置水平居中*/
text-align:center;
/* 针对IE的Hack */
*display: block;
*font-size: 262px;/*约为高度的0.873,300*0.873 约为262*/
*font-family:Arial;/*防止非utf-8引起的hack失效问题,如gbk编码*/
width:750px;
height:300px;
border: 1px solid #777;
}
.box img {
/*设置图片垂直居中*/
vertical-align:middle;
}
Skin/red2009/images/logo. gif" />
方法二:
未知大小的图片水平垂直居中-
/* for non-IE browsers */
div.holder {width:750px; height:300px; background:#f8f8f8; border:1px solid #777; text-align:center; display:table-cell; vertical-align:middle;}
/* vertical align for IE */
#edge {width:0;background:red; height:100%; display:inline-block; vertical-align:middle;}
#container {text-align:center; width:100%;font-size:0;display:inline-block; vertical-align:middle;}
Skin/red2009/images/logo. gif" alt="" />
发表评论
-
字符串的存储方式以及静态存储区域、栈、堆
2012-07-06 09:52 624下面两篇文章分析得比较详细.转自http://blog.c ... -
正则表达式测试工具
2012-07-06 09:45 717主要功能, 1.语法高亮显示 2.智能提示 3 ... -
perl学习日记7正则表达式
2012-07-06 09:37 6871. 正则表达式 1.1 什么是正则表 ... -
net 2.0下的asp.net ajax基本使用方法 (备忘)
2012-07-05 20:45 659asp.net ajax中用到了几个dll文件,这些可以从 ... -
vb 调用c#做的com 组件
2012-07-03 13:43 1034vb 调用c#做的com 组件 1:建立c# 项目 (注 ... -
flex 界面改进
2012-07-02 12:15 577f 代码如下: ... -
Java Server Push To Flex (ServerPush)
2012-07-02 12:15 578在网上找了许多的Flex与java 通信做ServerPu ... -
flex图片截取保存本地
2012-07-02 12:15 626height="222" creat ... -
Flex4+Spring3+Hibernate3+BlazeDS整合笔记
2012-07-02 12:15 510普通Java Web工程流行使用ssh框架,而当前台使用F ... -
学习flex 初步实现与java进行数据交互
2012-07-01 09:49 486本人是从事BS架构应用开发的,现在发现客户越来越关注用户的 ... -
Flex+BlazeDS整合J2ee示例
2012-07-01 09:49 447一、首先配置好eclipse下Flex开发环境 二、下载部 ... -
将 Flex 3 的应用程序迁移到 Flex 4 ―第 1 部分:将 Flex 3 Dashboard 应用程序导入 Flash Builder 4
2012-07-01 09:49 674本系列一共 4 个部 ... -
Flex嵌入jsp开发心得
2012-07-01 09:49 642PM搞了个外包的小项目,要求使用jsp显示数据统计图表。研 ... -
笔记本频道-eNet笔记本大全-硅
2012-06-30 16:12 629笔记本频道-eNet笔记本大全-硅 2011年09月15日 ... -
笔记本电脑小知识
2012-06-30 16:12 698笔记本电脑小知识 2011年11月22日 笔记本电脑小知 ... -
[独家新闻][热门]【笔记本电脑报价】笔记本电脑
2012-06-30 16:12 344[独家新闻][热门]【笔记本电脑报价】笔记本电脑 2011年 ... -
[热门]【笔记本电脑报价】笔记本电脑
2012-06-30 16:11 306[热门]【笔记本电脑报价】笔记本电脑 2011年08月11日 ...
相关推荐
CSS解决未知高度的DIV垂直居中CSS解决未知高度的DIV垂直居中
未知大小的图片 垂直居中,水平居中,纯CSS。兼容主流浏览器。
NULL 博文链接:https://xdwangiflytek.iteye.com/blog/1343445
δ知大小的图片在已知容器中的垂直居中和水平居中,一直是困扰大家的问题,今天西西带给大家一个简单的实现办法,详见css文件,此代码兼容各个浏览器,源码库推荐下载!
垂直居中在IE浏览器下的实现比较难实现,而更难实现的应该是未知内容高度的垂直水平居中!还好网上也有很多高人发布了一些解决的方法!这里我进行了一些改良,兼容FF,IE6,IE7,Opera…如发现问题有劳回复评论! ...
主要介绍了通过CSS设置未知大小图片在已知大小容器水平垂直居中,需要的朋友可以参考下
在曾经的 淘宝UED 招聘 中有这样一道题目: “使用纯CSS实现+未知尺寸的图片(但高宽都小于200px)在200px的正方形容器中水平和垂直居中。” 当然出题并不是随意,而是有其现实的原因,垂直居中是淘宝工作中最常遇到的...
资源内容为如何让已知宽高和未知宽高的div元素垂直水平居中,内容适合新手小白,细节方面都有,如果有误,望高手指导谢谢!
下文以span元素为例子,介绍一下如何实现span元素在div中实现水平垂直居中效果,代码如下: <!DOCTYPE html> <html> <head> <meta charset= utf-8> <meta name=author content=...
6.3.2 未知容器的大小而已知内容大小的水平和垂直居中问题 6.3.3 已知容器的大小而未知内容大小的水平和垂直居中问题 6.3.4 容器的大小和内容大小均未知的水平和垂直居中 6.3.5 修饰图片的水平和垂直居中 6.4 字体的...
说起水平垂直居中大家常看到的是使用绝对定位与负margin的配合或者是inline-block配合vertical-align:middle等...为了更好的阐述后面的方案,我们这里有一个命题:让未知大小容器(未知行数的文本)实现水平垂直居中。
尽管有CSS的vertical-align特性,但是并不能有效解决未知高度的垂直居中问题(在一个DIV标签里有未知高度的文本或图片的情况下)。
“使用纯CSS实现未知尺寸的图片(但高宽都小于200px)在200px的正方形容器中水平和垂直居中。” 当然出题并不是随意,而是有其现实的原因,垂直居中是 淘宝 工作中最常遇到的一个问题,很有代表性。 题目的难点在于两...
下图是理想中的效果图,外部容器的宽度和高度是固定的,中间的图片宽度和高度未知,但是图片要始终要相对于外部的容器垂直居中。 但是实际中实现的效果并不是很完美,由于各浏览器的解析都各不相同,所以各浏览器...
今天有人问起,晚上试着写出来,供参考; 以下代码兼容主流浏览器IE... 从最简单的开始………… 一、如何让一个DIV水平居中? 这个简单不作过多说明! [code] <style> body { text-align:center} #info{ margin:0
“使用纯CSS实现未知尺寸的图片(但高宽都小于200px)在200px的正方形容器中水平和垂直居中。” 当然出题并不是随意,而是有其现实的原因,垂直居中是 淘宝 工作中最常遇到的一个问题,很有代表性。 题目的难点在于两...