html:

css:

div{ width:400px;height:300px;text-align:center;font-size:0;*font-size:200px;}

div:after{

content:"";

vertical-align:middle;

height:100%;

display:inline-block;

width:0;

overflow:hidden;

}

div img{vertical-align:middle;}

注:1、div的font-size:0 是为了使图片在div内水平居中,否则会偏左1px;

2、因ie6/7不支持after伪类,div的*font-size:200px是为兼容ie6/7的图片垂直居中;

3、after中的width:0; overflow:hidden;不是必须的。

HTML中,大小不确定图片的水平垂直居中的更多相关文章

  1. ASP.NET中使用JavaScript实现图片自动水平滚动效果

    参照网上的资料,在ASP.NET中使用JavaScript实现图片自动水平滚动效果. 1.页面前台代码: <%@ Page Language="C#" AutoEventWi ...

  2. CSS实现文字和图片的水平垂直居中

    关于文字和图片的水平垂直居中,在前端界绝对算是一个老生常谈的问题了,尤其是垂直居中,什么千奇百怪的解法都能想的出来.下面我就总结一些比较常用的方法: 一.文本的水平垂直居中: 1.水平居中: 是不是很 ...

  3. CSS元素(文本、图片)水平垂直居中方法

    1.text-align:center; 2.margin:0 auto; 3.display:inline-block; + text-align:center; 4.position:relati ...

  4. css 单行图片文字水平垂直居中汇总

    (1) 水平居中 a. 行内元素水平居中 因为img是行内元素(行内块级元素也一样)父级元素设置text-align:center即可,例如: <div style="width: 6 ...

  5. 常见的几种 CSS 水平垂直居中解决办法

    用CSS实现元素的水平居中,比较简单,可以设置text-align center,或者设置 margin-left:auto; margin-right:auto 之类的即可. 主要麻烦的地方还是在垂 ...

  6. HTML+CSS水平垂直居中

    啦啦啦,好了,今天来分享自己的第一个知识点,难得自己还能想起来过来博客园,写写博客的. 好了,言归正传,今天分享关于html和css的一个简单的知识点,对于大部分从事前端开发的人员来说可能都是很简单的 ...

  7. css:元素水平垂直居中的多种方式

    CSS元素(文本.图片)水平垂直居中方法   1.text-align:center; 2.margin:0 auto; 3.display:inline-block; + text-align:ce ...

  8. CSS-水平居中、垂直居中、水平垂直居中

    1.水平居中 水平居中可分为行内元素水平居中和块级元素水平居中 1.1 行内元素水平居中 这里行内元素是指文本text.图像img.按钮超链接等,只需给父元素设置text-align:center即可 ...

  9. css 水平垂直居中总结

    空闲总结了下水平垂直居中方案,欢迎补充: 水平居中 水平居中有两种情况: 子元素是内联元素 这种那个情况下只需要在父元素定义: text-align:center; 例子: html: //省略了bo ...

随机推荐

  1. Linu之用户管理【useradd】【userdel】【usermod】【passwd】【权限】

    linux下创建用户 1.用户的创建 • 简介 linux是一个多用户多任务的分时操作系统,每个用户都是在root下的一个子用户,拥有不同的权限.用户登入成功后可进入系统和自己的主目录. •实现账号的 ...

  2. 第7.20节 案例详解:Python抽象类之真实子类

    第7.20节 案例详解:Python抽象类之真实子类 上节介绍了Python抽象基类相关概念,并介绍了抽象基类实现真实子类的步骤和语法,本节结合一个案例进一步详细介绍. 一.    案例说明 本节定义 ...

  3. Python中序列解包与函数的参数收集之间的关系

    在<第4.7节 Python特色的序列解包.链式赋值.链式比较>中老猿介绍了序列解包,<第5.2节 Python中带星号的函数参数实现参数收集>介绍了函数的参数收集,实际上函数 ...

  4. PyQt(Python+Qt)学习随笔:快速理解Qt 中Action是什么

    一.引言 Qt中Action这个词接触很久了,一直以来没去学习,今天终于准备学习了,查了些资料,初步总结为: Action为界面操作的抽象,应用程序可以通过菜单,工具栏按钮以及键盘快捷键来调用通用的命 ...

  5. Monkey的使用

    1.进入adb shell 环境 在Windows环境下进入DOS界面,输入adb shell 注意:adb shell服务使用的端口是5037,如果此端口被其他进程占用时,将不能正常启动adb sh ...

  6. [SWPU2019]Web1 空格过滤用/**/ 注释过滤闭合单引号 imformation_schema.columns/tables过滤 用5.7新特性 或无名注入(此处database()不能用)

    0x00 知识点 二次注入流程分析 二次注入漏洞在CTF中常见于留言板和注册登录功能,简单来说可以分为两个步骤: 插入恶意数据(发布帖子,注册账号),用mysql_escape_string()函数对 ...

  7. 再次学习sql注入

    爆所有数据库 select schema_name from information_schema.schemata 先爆出多少个字段 id = 1 order by ?; mysql5.0及以上 都 ...

  8. .net core 注入的几种方式

    一.注册的几种类型: services.TryAddSingleton<IHttpContextAccessor, HttpContextAccessor>();//单利模式,整个应用程序 ...

  9. Gradle上传依赖到私服(nexus)

    子模块配置 buildscript { repositories { mavenLocal() maven { url "http://maven.aliyun.com/nexus/cont ...

  10. go学习49天

    写文件操作 func OpenFile(name string,flag int,perm FileMode) (file *File,err error)