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. C语言const和define的区别

    const 定义的是变量不是常量,只是这个变量的值不允许改变是常变量!带有类型.编译运行的时候起作用存在类型检查. define 定义的是不带类型的常数,只进行简单的字符替换.在预编译的时候起作用,不 ...

  2. 饱含辛酸开发 WPF CustomControl

    引言 不知不觉间WPF开发已有两年光景,或许有很多人会问WPF还需要学习吗?WPF还有前途吗?其实我也很担心这个问题. .Net Core3.x已经支持WPF开发,.Net 5也宣布要支持WPF.是否 ...

  3. 查询Oracle日志文件的方法

    Oracle日志文件相信经常使用Oracle数据库的朋友都比较熟悉了,下面将为您介绍的是查询Oracle日志文件的几种方法,供您参考学习. 1.查询系统使用的是哪一组日志文件: select * fr ...

  4. (十八)面向流水线的设计:CPU的一心多用

    一.单指令周期       由前可知,一条CPU指令的执行有三个步骤:指令读取.指令译码.指令执行.由于这个过程受CPU时钟的控制,如果我们将这个过程安排在一个CPU时钟周期内执行,这种设计思路就叫单 ...

  5. 从TFS到git的持续集成之路

    前言 公司目前使用TFS,由于TFS不灵活不能很好的持续集成,且给测试造成很大重的负担,所以近期准备迁移到git上 目标 解决项目运转的瓶颈(版本太多,导致测试跟不上,需引入自动化测试) 过程 主线分 ...

  6. moviepy音视频开发:audio_loop实现音频内容循环重复

    ☞ ░ 前往老猿Python博文目录 ░ 概述 moviepy的audio_loop函数用于将音频剪辑内容循环一定次数,返回值是原剪辑内容重复指定次数对应的剪辑. 调用语法: audio_loop(a ...

  7. Python文件操作函数os.open、io.open、内置函数open之间的关系

    Python提供了多种文件操作方式,这里简单介绍os.open.io.open.内置函数open之间的关系: 一.内置函数open和io.open实际上是同一个函数,后者是前者的别名: 二.os.op ...

  8. C# operator 关键字的用法

    operator 只要是运算符都能重载 operator 关键字的主要作用是用来重载运算符的,还可以用于类或结构中类型的自定义转换. 下面看个例子 class Feige { //定义两个全局变量 i ...

  9. 连接数从异常到 300 到 5(RDS MySQL 的一个大坑•后记)

    在 <记 RDS MySQL 的一个大坑> 中,我提到遇到 User juxxxxxxxxxx already has more than 'max_user_connections' a ...

  10. 【科技】位运算(bitset)优化最长公共子序列算法

    最长公共子序列(LCS)问题 你有两个字符串 \(A,B\),字符集为 \(\Sigma\),求 \(A, B\) 的最长公共子序列. 简单动态规划 首先有一个广为人知的 dp:\(f_{i,j}\) ...