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 ...
随机推荐
- WriteFile,CreateFile,ReadFile
原文链接:https://blog.csdn.net/Jeanphorn/article/details/44982273 将数据写入一个文件.该函数比fwrite函数要灵活的多.也可将这个函数应用于 ...
- 使用react终端运行npm start时报错
npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! my-app@0.1.0 start: `react-scripts start` npm ERR ...
- Python模块是否支持自定义属性使用双下划线开头和结尾?
我们知道在Python中,变量名类似__xxx__的,也就是以双下划线开头并且以双下划线结尾的变量和方法,是特殊变量,特殊变量是可以直接访问的,不是私有变量,所以,一般实例变量和类变量以及方法不能用_ ...
- 手机APP测试(测试点、测试流程、功能测试)
1.功能测试 1.1 启动 APP安装完成后,是否可以正常打开,稳定运行 APP的速度是可以让人接受,切换是否流畅 网络异常时,应用是否会崩溃:在请求超时的情况下,如果程序逻辑处理的不好,就有可能发生 ...
- 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 ...
- AcWing 232. 守卫者的挑战
题目链接 大型补档计划. 比较显然的dp 设 \(f[i][j][k]\) 为前 \(i\) 次,擂台上了 \(j\) 次,空闲容量(背包 - 使用的)为 \(k\) 的概率. 不上擂台的转移:\(f ...
- java实现TCP通信(带界面)
服务端: package NetWork; import java.io.*;import java.net.*;import java.awt.event.*;import java.awt.*;i ...
- B树——插入和删除
B树--插入和删除 B树的插入 5阶B数--结点关键字个数向上取整m/2-1≤n≤m-1 即2≤n≤4 连续插入5个元素后,超出来了. 在插入key后,若导致原结点关键字数超过上限,则从中间位置(m/ ...
- DPSK通信系统的FPGA实现
之前接触过一些FPGA的相关知识,借着实现一个简单的DPSK系统,顺便复习和记录一下Verilog HDL的简单使用方法.准备直接用一张图展现DPSK的调制解调原理,再按照模块介绍Verilog的实现 ...
- Nacos源码深度解析1-服务注册初始化(客户端)
一.初始化 NamingService naming = NamingFactory.createNamingService(properties); 二.通过反射传入properties生成Naco ...