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. git全流程

    服务器:Ubuntu 使用git前准备工作: 下载git之前先更新: apt-get update 安装git: apt-get install git 创建本地仓库: mkdir test git初 ...

  2. 孪生网络入门(上) Siamese Net及其损失函数

    最近在多个关键词(小数据集,无监督半监督,图像分割,SOTA模型)的范畴内,都看到了这样的一个概念,孪生网络,所以今天有空大概翻看了一下相关的经典论文和博文,之后做了一个简单的案例来强化理解.如果需要 ...

  3. moviepy用VideoFileClip加载视频时报UnicodeDecodeError: utf-8 codec cant decode byte invalid start byte错误

    专栏:Python基础教程目录 专栏:使用PyQt开发图形界面Python应用 专栏:PyQt入门学习 老猿Python博文目录 老猿学5G博文目录 使用moviepy用: clip1 = Video ...

  4. PyQt(Python+Qt)学习随笔:QDockWidget停靠窗toggleViewAction方法的作用

    专栏:Python基础教程目录 专栏:使用PyQt开发图形界面Python应用 专栏:PyQt入门学习 老猿Python博文目录 toggleViewAction方法返回一个动作对象,该动作对象通过点 ...

  5. 转:HTTP协议简介与在python中的使用详解

    1. 使用谷歌/火狐浏览器分析 在Web应用中,服务器把网页传给浏览器,实际上就是把网页的HTML代码发送给浏览器,让浏览器显示出来.而浏览器和服务器之间的传输协议是HTTP,所以: HTML是一种用 ...

  6. PyQt学习随笔:Model/View设计中支持视图中数据修改的方法及步骤

    老猿Python博文目录 专栏:使用PyQt开发图形界面Python应用 老猿Python博客地址 要支持视图中的数据可以修改,需要两个步骤: 1. 在视图中设置editTriggers属性支持在视图 ...

  7. PyQt(Python+Qt)学习随笔:Designer中的QDialogButtonBox的accepted、rejected和helpRequested信号

    QDialogButtonBox中可以包含多个pushButton,但QDialogButtonBox本身只提供4种信号,分别是accepted.rejected.clicked和helpReques ...

  8. 建立SQL Server用户登录

    第一步:右击服务器名,点击"属性",选择"安全性",选中"Sql server和Windows身份验证模式". 第二步:鼠标右键点击安全性中 ...

  9. nginx学习之——虚拟主机配置

    例子1: 基于域名的虚拟主机 server { listen 80;  #监听端口 server_name a.com; #监听域名 location / { root /var/www/a.com; ...

  10. 熟悉ES6常规看这一篇就够了!

    尊重原创:转自https://www.jianshu.com/p/287e0bb867ae 刚开始用Vue或者React,很多时候我们都会把ES6+这位大兄dei加入我们的技术栈中.但是ES6+那么多 ...