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 ...
随机推荐
- xargs--冬天里的一丝暖意
本文为博客园作者所写: 一寸HUI,个人博客地址:https://www.cnblogs.com/zsql/ 你有批量kill作业吗?有因为删除文件夹的内容太多而报错吗?-bash: /bin/rm: ...
- 树莓派搭建seafile服务器备忘
用户:pi 密码:raspberry 启用root用户https://blog.csdn.net/chenxd1101/article/details/53437925(防止特殊原因pi用户不能登录时 ...
- webpack系列:webpack小老弟接了个简单活
webpack深入浅出系列:进阶篇 前沿,本篇文章的讲解思路是以webpack的五大核心为线索,以webpack对象为第一视角来讲述(以前记得看过一个文笔非常厉害的技术啊婆写的,非常有趣.然后我就想着 ...
- intelliJ IDEA 鼠标光标消失问题
经常会遇到,光标就莫名消失了,得重启 IntelliJ IDEA 才行,到官方论坛询问才得知,系统时间如果被调前就会发生这个情况,我想原因是之前的破解是用的调系统时间的方式,所以留下了这个bug,总之 ...
- 用java以正确的姿势刷CSP
许多程序算法考试中,用java是个不错的选择,它几乎实现了所有c++能实现的,所以越来越受Acmer的欢迎.总结一下用到的一些技巧和方法.更多关于csp的可参考海岛blog|皮卡丘 1. 输出 规格化 ...
- dart时间处理的几个方法
一.时间处理的方法 1.获取当前时间 new DateTime.now(); 2.设置时间 new DateTime(2020, 11, 11, 12, 37 , 36); 3.解析时间 DateTi ...
- 老猿学5G扫盲贴:中移动的5G计费架构中Nchf'服务化接口以及CHF中的AGF
专栏:Python基础教程目录 专栏:使用PyQt开发图形界面Python应用 专栏:PyQt入门学习 老猿Python博文目录 老猿学5G博文目录 一.关于Nchf' 在中移动企标中出现了在3GPP ...
- PyQt(Python+Qt)学习随笔:QTableWidgetItem的构造方法
老猿Python博文目录 专栏:使用PyQt开发图形界面Python应用 老猿Python博客地址 QTableWidgetItem类为QTableWidget类的项实例类,用于保存表格部件的信息.项 ...
- 第14.7节 Python模拟浏览器访问实现http报文体压缩传输
一. 引言 在<第14.6节 Python模拟浏览器访问网页的实现代码>介绍了使用urllib包的request模块访问网页的方法.但上节特别说明http报文头Accept-Encodin ...
- Oracle表操作-创建及增删改查
数据类型: 1.CHAR:定长字符类型,默认长度是1,最长不超过2000字节. 2.CARCHAR2(length):可变字符类型,默认长度是1,最长不超过4000字符. 3.NUMBER(P,S): ...