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. WriteFile,CreateFile,ReadFile

    原文链接:https://blog.csdn.net/Jeanphorn/article/details/44982273 将数据写入一个文件.该函数比fwrite函数要灵活的多.也可将这个函数应用于 ...

  2. 使用react终端运行npm start时报错

    npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! my-app@0.1.0 start: `react-scripts start` npm ERR ...

  3. Python模块是否支持自定义属性使用双下划线开头和结尾?

    我们知道在Python中,变量名类似__xxx__的,也就是以双下划线开头并且以双下划线结尾的变量和方法,是特殊变量,特殊变量是可以直接访问的,不是私有变量,所以,一般实例变量和类变量以及方法不能用_ ...

  4. 手机APP测试(测试点、测试流程、功能测试)

    1.功能测试 1.1 启动 APP安装完成后,是否可以正常打开,稳定运行 APP的速度是可以让人接受,切换是否流畅 网络异常时,应用是否会崩溃:在请求超时的情况下,如果程序逻辑处理的不好,就有可能发生 ...

  5. kaggle——Bag of Words Meets Bags of Popcorn(IMDB电影评论情感分类实践)

    kaggle链接:https://www.kaggle.com/c/word2vec-nlp-tutorial/overview 简介:给出 50,000 IMDB movie reviews,进行0 ...

  6. AcWing 232. 守卫者的挑战

    题目链接 大型补档计划. 比较显然的dp 设 \(f[i][j][k]\) 为前 \(i\) 次,擂台上了 \(j\) 次,空闲容量(背包 - 使用的)为 \(k\) 的概率. 不上擂台的转移:\(f ...

  7. java实现TCP通信(带界面)

    服务端: package NetWork; import java.io.*;import java.net.*;import java.awt.event.*;import java.awt.*;i ...

  8. B树——插入和删除

    B树--插入和删除 B树的插入 5阶B数--结点关键字个数向上取整m/2-1≤n≤m-1 即2≤n≤4 连续插入5个元素后,超出来了. 在插入key后,若导致原结点关键字数超过上限,则从中间位置(m/ ...

  9. DPSK通信系统的FPGA实现

    之前接触过一些FPGA的相关知识,借着实现一个简单的DPSK系统,顺便复习和记录一下Verilog HDL的简单使用方法.准备直接用一张图展现DPSK的调制解调原理,再按照模块介绍Verilog的实现 ...

  10. Nacos源码深度解析1-服务注册初始化(客户端)

    一.初始化 NamingService naming = NamingFactory.createNamingService(properties); 二.通过反射传入properties生成Naco ...