HTML中,大小不确定图片的水平垂直居中
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中,大小不确定图片的水平垂直居中的更多相关文章
- ASP.NET中使用JavaScript实现图片自动水平滚动效果
参照网上的资料,在ASP.NET中使用JavaScript实现图片自动水平滚动效果. 1.页面前台代码: <%@ Page Language="C#" AutoEventWi ...
- CSS实现文字和图片的水平垂直居中
关于文字和图片的水平垂直居中,在前端界绝对算是一个老生常谈的问题了,尤其是垂直居中,什么千奇百怪的解法都能想的出来.下面我就总结一些比较常用的方法: 一.文本的水平垂直居中: 1.水平居中: 是不是很 ...
- CSS元素(文本、图片)水平垂直居中方法
1.text-align:center; 2.margin:0 auto; 3.display:inline-block; + text-align:center; 4.position:relati ...
- css 单行图片文字水平垂直居中汇总
(1) 水平居中 a. 行内元素水平居中 因为img是行内元素(行内块级元素也一样)父级元素设置text-align:center即可,例如: <div style="width: 6 ...
- 常见的几种 CSS 水平垂直居中解决办法
用CSS实现元素的水平居中,比较简单,可以设置text-align center,或者设置 margin-left:auto; margin-right:auto 之类的即可. 主要麻烦的地方还是在垂 ...
- HTML+CSS水平垂直居中
啦啦啦,好了,今天来分享自己的第一个知识点,难得自己还能想起来过来博客园,写写博客的. 好了,言归正传,今天分享关于html和css的一个简单的知识点,对于大部分从事前端开发的人员来说可能都是很简单的 ...
- css:元素水平垂直居中的多种方式
CSS元素(文本.图片)水平垂直居中方法 1.text-align:center; 2.margin:0 auto; 3.display:inline-block; + text-align:ce ...
- CSS-水平居中、垂直居中、水平垂直居中
1.水平居中 水平居中可分为行内元素水平居中和块级元素水平居中 1.1 行内元素水平居中 这里行内元素是指文本text.图像img.按钮超链接等,只需给父元素设置text-align:center即可 ...
- css 水平垂直居中总结
空闲总结了下水平垂直居中方案,欢迎补充: 水平居中 水平居中有两种情况: 子元素是内联元素 这种那个情况下只需要在父元素定义: text-align:center; 例子: html: //省略了bo ...
随机推荐
- keeplived高可用集群
什么是Keeplived? Keepalived是Linux下面实现VRRP备份路由的高可靠性运行件.基于Keepalived设计的服务模式能够真正做到主服务器和备份服务器故障时IP瞬间无缝交接.二者 ...
- 第14.13节 BeautifulSoup的其他功能导览
前面<第14.9节 Python中使用urllib.request+BeautifulSoup获取url访问的基本信息 >.<第14.10节 Python中使用BeautifulSo ...
- 第15.15节 PyQt(Python+Qt)入门学习:Designer的menu菜单、toolBar工具栏和Action动作详解
老猿Python博文目录 老猿Python博客地址 一.引言 Qt Designer中的部件栏并没有菜单.toolBar以及Action相关的部件,仅在MainWindow类型窗口提供了menu.to ...
- volatility内存取证学习
工具下载: Linux环境 apt-get install volatility 各种依赖的安装,(视情况安装) #Distorm3:牛逼的反编译库 pip install distorm3 #Y ...
- 学习tcp和udp
tcp和udp的差别 tcp和udp是不一样的 tcp是一个可靠的连接,如果发出一个tcp请求,那么就一定要回复一个请求 而udp是不需要回复的,就像QQ一样,只要发过来就可以了,不管别人在不在线,发 ...
- 小心使用 Task.Run 解惑篇
继上一篇文章之后,这篇文章主要解答以下两个疑惑: 由于值类型是拷贝的方式赋值,所以捕获的本地变量和类成员是指向的是各自的值,对本地变量的捕获不会影响到整个类.但如果把 _id 改为引用类型(如 Str ...
- PHash从0到1
背景 在重复图识别领域,对于识别肉眼相同图片,PHash是很有用的,而且算法复杂度很低.它抓住了 " 人眼对于细节信息不是很敏感 " 的特性,利用DCT变换把高频信息去掉,再加上合 ...
- 算法——1~n 整数中 1 出现的次数
输入一个整数 n ,求1-n这n个整数的十进制表示中1出现的次数. 例如,输入12,1-12这些整数中包含1 的数字有1.10.11和12,1一共出现了5次. leetcode 解题思路:依次遍历每一 ...
- MySQL和sparkSQL合并行
表A 表B 从表A到表B MySQL 写法:select name, group_concat(score seperate ';') as score from A group by name sp ...
- Salesforce 系列(一):云服务和 Salesforce 理念简介
本系列文章系笔者在 Salesforce 开发过程中的些许总结与心得,旨在记录自己的成长,以及为对 Salesforce 感兴趣的小伙伴提供一些帮助,如有疏漏,还望多多包涵 ~ 云服务 云服务,也称云 ...