css未知尺寸的图片的水平和垂直居中

纯CSS实现未知尺寸的图片水平和垂直居中
.box {
        /*非IE的主流浏览器识别的垂直居中的方法*/
        display: table-cell;
        vertical-align:middle;

        /*设置水平居中*/
        text-align:center;

        /* 针对IE的Hack */
        *display: block;
        *font-size:262px; /*约为高度的0.873,300*0.873 约为262*/
        *font-family:Arial; /*防止非utf-8引起的hack失效问题,如gbk编码*/

        width:400px;
        height:300px;
        border:1px solid #eee;
}
.box img {
        /*设置图片垂直居中*/
        vertical-align:middle;
}

<div class=”box”>
        <img src=”http://www.www.hello-code.com/rainweb-blue.png“/>
</div>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/367665.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

heap 的一些用法

noip 合并果子 #include<bits/stdc.h> using namespace std; int heap[maxn]; int size0; void input(int d) {heap[size]d;push_heap(heap,heapsize,greater<int>()); } int get() {pop_heap(heap,heapsize,greater<int>());//pop_heap(heap,heapsize);ret…

java 反射 new class_Java高级特性-反射:不写死在代码,还怎么 new 对象?

反射是 Java 的一个高级特性&#xff0c;大量用在各种开源框架上。在开源框架中&#xff0c;往往以同一套算法&#xff0c;来应对不同的数据结构。比如&#xff0c;Spring 的依赖注入&#xff0c;我们不用自己 new 对象了&#xff0c;这工作交给 Spring 去做。然而&#xff0c;…

EF Core利用Scaffold从根据数据库生成代码

在EF6 之前的时代&#xff0c;如果需要从数据库中生成代码&#xff0c;是可以直接在界面上操作的&#xff0c;而到了EF Core的时代&#xff0c;操作方式又有更简便的方式了&#xff0c;我们只需要记住以下这条指令。 Scaffold-DbContext "Server服务器地址;Database数据库…

如何通过CSS开启硬件加速来提高网站性能

你知道我们可以在浏览器中用css开启硬件加速&#xff0c;使GPU (Graphics Processing Unit) 发挥功能&#xff0c;从而提升性能吗&#xff1f; 现在大多数电脑的显卡都支持硬件加速。鉴于此&#xff0c;我们可以发挥GPU的力量&#xff0c;从而使我们的网站或应用表现的更为流畅…

Spring Security应用程序中的su和sudo

很久以前&#xff0c;我从事的项目具有很强大的功能。 有两个角色&#xff1a;用户和主管。 主管可以以任何方式更改系统中的任何文档&#xff0c;而用户则更受工作流约束的限制。 当普通用户对当前正在编辑和存储在HTTP会话中的文档有疑问时&#xff0c;主管可以介入&#xff…

示例介绍:JavaFX 8打印

我有一段时间没有写博客了&#xff0c;我想与其他人分享有关JavaFX的所有信息&#xff08;我的日常工作和家庭可能是借口&#xff09;。 对于那些是本博客的新手&#xff0c;我是JavaFX 2 Introduction by Example&#xff08;JIBE&#xff09;的作者&#xff0c; Java 7 Recip…

placeholder的使用

1.定义 placeholder 属性提供可描述输入字段预期值的提示信息 该提示会在输入字段为空时显示&#xff0c;并会在字段获得焦点时消失。 注释&#xff1a;placeholder 属性适用于以下的 <input> 类型&#xff1a;text, search, url, telephone, email 以及 password。 2.用…

字符串练习

字符串练习&#xff1a; http://news.gzcc.cn/html/2017/xiaoyuanxinwen_1027/8443.html 取得校园新闻的编号 trhttp://news.gzcc.cn/html/2017/xiaoyuanxinwen_1027/8443.html print(a[-14:-5])https://docs.python.org/3/library/turtle.html 产生python文档的网址 trhttps:/…

CSS清除行内元素之间的HTML空白

至今我还记得年轻是在IE6上开发的那些苦逼日子,特别希望IE浏览器采用 inline-block 的显示方式.行内块(inline-block)是非常有用的,特别是想要不用block和float来控制这些行内元素的margin,padding之时。问题来了,HTML源码中行内元素之间的空白有时候显示在屏幕上那是相当的讨厌…

int64 java_为什么json 不能使用 int64类型

json 简介jsON(JavaScript Object Notation) 是一种轻量级的数据交换格式。 易于人阅读和编写。同时也易于机器解析和生成。 它基于JavaScript Programming Language, Standard ECMA-262 3rd Edition - December 1999的一个子集 。 JSON采用完全独立于语言的文本格式&#xff0…

Spring MVC自定义验证注释

在上一教程中&#xff0c;我展示了如何使用注释来验证表单 。 这对于简单的验证非常有用&#xff0c;但是最终&#xff0c;您需要验证一些现成的注释中没有的自定义规则。 例如&#xff0c;如果您需要根据输入的出生日期来验证用户已超过21岁&#xff0c;或者可能需要验证用户的…

Best Time to Buy and Sell Stock with Cooldown

https://soulmachine.gitbooks.io/algorithm-essentials/java/dp/best-time-to-buy-and-sell-stock-with-cooldown.html转载于:https://www.cnblogs.com/ZhiHao-queue/p/9521933.html

前期

转载于:https://www.cnblogs.com/joker157/p/8618091.html

解决IE8下body{ overflow:hidden;}无效的解决办法

css中IE8 body{ overflow:hidden;}无效的解决办法&#xff1a; 在页面html中使用: body{ overflow:hidden; } 在ie8下无效 &#xff0c;仍然有滚动条。 解决的办法如下&#xff1a; 替换为如下: html { overflow:hidden; } 这样就可以实现隐藏滚动条了 而且兼容目前所有的浏览器…

0基础能学mysql数据库吗_mysql学习入门:零基础如何使用mysql创建数据库表?

零基础如何自学Mysql创建数据库&#xff0c;是Mysql学习者必经之路&#xff0c;Mysql是受欢迎的关系数据库管理系统,WEB应用方面MySQL是很好的RDBMS应用软件之一。如何使用Mysql创建数据库表&#xff0c;打开Mysql学习进阶大门&#xff0c;就是今天MYSQL学习教程丁光辉博客认为…

使用ANTLR和Java创建外部DSL

在以前的一段时间里&#xff0c;我曾写过有关使用Java的内部DSL的文章。 在Martin Fowler撰写的《 领域特定语言 》一书中&#xff0c;他讨论了另一种称为外部DSL的DSL&#xff0c;其中DSL是用另一种语言编写的&#xff0c;然后由宿主语言进行解析以填充语义模型。 在前面的示…

vue跨域解决及打包

打包之前需要修改如下配置文件&#xff1a; 配置文件一&#xff1a;build>>>utils.js (修改publicPath:"../../" , 这样写是处理打包后找不到静态文件&#xff08;图片路径失效&#xff09;的问题) 配置文件二&#xff1a;config>>>index.js(修改a…

8. Oracle 联机重做日志文件(ONLINE LOG FILE)

转载自&#xff1a;http://blog.csdn.net/leshami/article/details/5749556 一、Oracle中的几类日志文件 Redo log files -->联机重做日志 Archive log files -->归档日志 Alert log files -->告警日志 Trace files -->跟踪日志 user_dump_…

Bootstrap中实现图片圆角效果

Bootstrap 对图片的支持。Bootstrap 提供了三个可对图片应用简单样式的 class&#xff1a; .img-rounded&#xff1a;添加 border-radius:6px 来获得图片圆角。.img-circle&#xff1a;添加 border-radius:500px 来让整个图片变成圆形。.img-thumbnail&#xff1a;添加一些内边…

java 唯一索引冲突_JPA merge联合唯一索引无效问题解决方案

问题JPA的merge()操作 是合并的意思&#xff0c;就是当保存的实体时&#xff0c;根据主键id划分&#xff0c;如果已存在&#xff0c;那么就是更新操作&#xff0c;如果不存在&#xff0c;就是新增操作但是这个仅针对 主键id 划分&#xff0c;对联合唯一索引 无效&#xff0c;两…