当前位置:首页 > 日记 > 正文

不确定宽度和高度图像中垂直中心的CSS样式

不确定宽度和高度图像中垂直中心的CSS样式
本文主要介绍了div中的图像是垂直居中的,以及CSS样式是如何在宽度和高度不确定的情况下编写的。

最简单的方法是设置外部元素的CSS属性:

复制代码代码如下所示:
div {
显示:表单元格;
}

但IE6 / 7不支持CSS样式,并可以使用以下方法适合他们。

HTML的结构如下:

复制代码代码如下所示:
CSS代码如下所示:

复制代码代码如下所示:
div {
宽度:100px;
身高:100px;
边境:1px solid # CCC;
}
跨{
线高度:100%;
垂直对齐:中间;
显示:内联块;
身高:100%;
}
img {
宽度:100%;
垂直对齐:中间;
}

通过设置这些属性来实现下图的效果,画面是垂直居中的部

该方法的原理是将在img标签前空span标签,用它来打开DIV线高度100%。

相关文章

对console.trace方法在Node.js的使

对console.trace方法在Node.js的使

使用说明,方法,电脑软件,console,trace,方法显示: 将当前调用堆栈输出到标准错误流。 Grammar: 复制代码代码如下所示: Console.trace(标签) 接收参数: 标签 实例uff1a 复制代码代码如下所示: Console.trace(); 操作结果: 特雷斯: 在对象。( /…

选择了什么样的图像文件格式

选择了什么样的图像文件格式

图像,文件格式,选择了,电脑软件,选择图像文件格式之间应该是透明的,颜色深,有三的压缩率,如果色彩丰富的颜色,不透明度的支持,然后检测是最合适的选择;如果你需要支持透明度,然后JPG无疑是第一选择 一种,哪三种格式 分别是GIF、JPG和PNG。 两。为…

复选框、选择取消和跨页面保存实现

复选框、选择取消和跨页面保存实现

取消,选择,方法,复选框,页面,复制代码代码如下所示: $(文档)Ready(函数(){) 选择复选框 * / $(,并)。活(单击 如果($(this)。Attr(检查)= =检查){ / /如果选择 CheckAll(); {人} UnCheckAll(); } UpdateHfValues(); }); $(。checkone)。每个(函数(){) $(这个)。 CheckOne(); Upd…

一种简单快速的PS颜色筛选方法

一种简单快速的PS颜色筛选方法

方法,筛选,颜色,快速,简单,本教程是一个简短的介绍朋友谁使用PS简单和快速筛选出某种颜色的图片。这个教程既实用又难。新手也可以来学习。推荐,喜欢的朋友可以跟着教程一起学习。 像本教程的ps学习者介绍了一种简单快速的方法来屏蔽图片上…

PS制作浪漫爱情艺术摄影教程

PS制作浪漫爱情艺术摄影教程

教程,浪漫爱情,艺术摄影,电脑软件,PS,本教程将向你介绍用PS制作浪漫爱情艺术的方法,这非常适合初学者学习。对初学者来说是很好的学习,尤其是浪漫的朋友。让我们从下一步学习。 每个人都喜欢浪漫,但有几个浪漫的人谁会做这件事。这里有一点关…

PHP网页病毒清除类

PHP网页病毒清除类

清除,网页,电脑软件,PHP,本文演示了PHP网页的病毒清除,供大家参考: 很多人的网页在PHP、ASP、HTML、js等文件中经常被忽略,并有很多木马地址,造成很多麻烦!我曾经有过这样的站,所以我在仇恨之下写下了这段代码。虽然这篇文章浪费了很多资源,但它…

CKEditor着色代码代码高亮插件,完美

CKEditor着色代码代码高亮插件,完美

插件,代码高亮,代码,完美,电脑软件,使用FCKeditor CKEditor对象是不一样的,不直接调用innerHTML和outerHTML,绕了一个大弯,插入新节点到当前节点,然后删除原始节点…这很傻,但它解决的问题。 顺便说一下,一个选项被添加到高级配置页面,而不是自动…

在DreamweaverCS4界面新功能介绍

在DreamweaverCS4界面新功能介绍

新功能,界面,电脑软件,Dreamweaver CS4的界面和功能都发生了很大的变化,让我们跟随作者看看DW CS4已经添加到界面中。接下来,网页教学网将带来一些设计和DW CS4继承代码的经验。我希望每个人都能喜欢它! 相关文章:Dreamweaver CS4第一新功能试…

ajax解决全局变量指派问题

ajax解决全局变量指派问题

指派,全局变量,电脑软件,ajax,我遇到一个问题在今天做这个项目,我使用Ajax,在美元。Ajax({内分配一个全局变量不赋值,纠结了很久,然后在网上搜索,才知道,默认的是Ajax(异步请求,当你想在这个时候,分配价值没有得到,所以如果转让成功)在美元。Ajax({里面…

HTML5使用drawImage()绘制图像的方法

HTML5使用drawImage()绘制图像的方法

图像,方法,绘制,电脑软件,drawImage,本文主要介绍了HTML5使用DrawImage()绘制图像的方法。绘图环境提供了该方法的三个不同版本。可根据需要选择,并附原材料。 1。绘制图像 使用drawImage()来绘制图像的方法。绘图环境提供了三种不同版本的方…

HTML5+CSS3应用详解

HTML5+CSS3应用详解

详解,电脑软件,现在,HTML5和CSS3正在等待大家,让我们看看他们是否能真的把我们的设计到一个新的高度。 网站设计者可以使用HTML4和CSS2.1做出很酷的东西。我们可以完成对文件的逻辑结构而不使用旧表的布局,创造一个丰富的网站,我们可以添加一个…

PHP定期将HTML与类的div和选择内容

PHP定期将HTML与类的div和选择内容

方法,选择,相匹配,内容,电脑软件,本文演示了在PHP正则匹配html中选择带有类的div内容的方法,供大家参考: 首先看一段HTML代码: 复制代码代码如下所示: 潮汐表资料仅供参考 潮汐时间(小时) 00:58 05:20 13:28 21:15 潮高(厘米) 一百六十一 …