未知大小的图片在指定大小的div盒子中垂直水平居中:

无需要JS

<style>
.box {
/*垂直居中*/
display: table-cell;
vertical-align:middle; /*水平居中*/
text-align:center; /* IE */
*display: block;
*font-size: 175px;/*约为高度的0.873,200*0.873 约为175*/
*font-family:Arial;/*防止非utf-8引起的hack失效问题,如gbk编码*/ width:200px;
height:200px;
border: 1px solid #eee;
}
.box img {
/*图片垂直居中*/
vertical-align:middle;
} </style>
<div class="box">
<img src="http://images.cnblogs.com/cnblogs_com/daysme/915489/o_logo_5.jpg" />
</div>

css未知大小的图片居中的更多相关文章

  1. !!!css如何让img图片居中?css的display属性实现图片居中(代码实例)

    在我们开发前端页面的时候,为了让页面效果美观,会让图片呈现居中效果.那么css怎么让img图片居中显示呢?本篇文章给大家带来css如何让img图片居中?css的display属性实现图片居中(代码实例 ...

  2. 用CSS让网页背景图片居中的方法

    网页背景居中的方法有很多种的.这里介绍一些用CSS让背景图片居中的方法. 让背景图片居中的第一个方法是用像素设定,很多都用这种,但是也是最麻烦的: <div style="width: ...

  3. CSS中让背景图片居中且不平铺

    background:url(../images/logo.jpg) no-repeat center ;

  4. 单个未知大小图片在div里面垂直居中的方法。。。添加辅助元素挤一下位置达到居中

    单个未知大小图片在div里面垂直居中的方法...添加辅助元素挤一下位置达到居中   <div class="ServicesLiTopPic"> <i>&l ...

  5. css文字居中、图片居中、div居中解决方案

    一.文字居中 若文字只有一行 <!--html代码--> <div class="box"> <p class="text"> ...

  6. 如何使用css来让图片居中不变形 微信小程序和web端适用

    图片变形很多人祭奠出了妖魔鬼怪般的各种大法,比如使用jq来写,或者使用css表达式来写.今天我总结的是使用css3来写,唯一最大缺点就是对一些浏览器版本不够兼容.下面就是关于如何使用css来让图片居中 ...

  7. css图片居中,通过纯css实现图片居中的多种实现方法

    在网页布局中,图文排版是我们常用的,那么经常会遇到如何让图片居中显示呢,这篇文章将总结常用css实现图片居中的方法总结: html结构: <div class="demo" ...

  8. 只用CSS实现容器内图片上下左右居中

    一直以来,大家都知道,DIV容器内设置 text-align:center 即可让图片居中,但是DIV内默认的图片是上对齐,不会上下居中,如果想要实现这样的效果,JS判断是比较麻烦的,因为DIV容器内 ...

  9. CSS设置图片居中的方法

    如果是应用了表格,那么设置单元格为align="center"就可以使其中的一切内容居中.如果没有应用表格要想设置图片居中就有点困难了.困难来自不按"常规出牌" ...

随机推荐

  1. python 基础 集合

    集合 集合是一个无序的,不重复的数据组合,它的主要作用如下: 去重,把一个列表变成集合,就自动去重了 关系测试,测试两组数据之前的交集.差集.并集等关系 交集 并集 差集 子集  对称差集 list ...

  2. Java-SpringMvc-响应Html代码展示

    代码 @RequestMapping(value = "/test.do", method = {RequestMethod.GET}) public void test(Http ...

  3. [LeetCode] 197. Rising Temperature_Easy tag: SQL

    Given a Weather table, write a SQL query to find all dates' Ids with higher temperature compared to ...

  4. 1.keras实现-->自己训练卷积模型实现猫狗二分类(CNN)

    原数据集:包含 25000张猫狗图像,两个类别各有12500 新数据集:猫.狗 (照片大小不一样) 训练集:各1000个样本 验证集:各500个样本 测试集:各500个样本 1= 狗,0= 猫 # 将 ...

  5. linux du df ls

    du可以查看文件和文件夹的大小,df主要查看数据库大小,查看分区的的磁盘使用情况,ls可以添加-h参数,方便我们查看文件大小 df可以查看一级文件夹大小.使用比例.档案系统及其挂入点,但对文件却无能为 ...

  6. Python3 socketserver模块

    socketserver(在Python2.*中的是SocketServer模块)是标准库中一个高级别的模块.用于简化网络客户与服务器的实现(在前面使用socket的过程中,我们先设置了socket的 ...

  7. 网页中自适应的显示PDF

    PDF格式呢,是一个高大的新式,如何在不同的浏览器中自适应显示,是一个值得研究的问题. 这里说明重点部分:获取浏览器宽高. IE中: document.body.clientWidth ==> ...

  8. yii2之增加省市字段

    第一步,利用数据库迁移文件改表 修改一下迁移文件: https://bitbucket.org/ysxy/zijiu.git

  9. ArcGIS 10——版本编辑流程

    上一篇文章学习了ArcGIS有关版本机制实现的基本原理,本文结合ArcGIS的数据编辑知识来将版本编辑.协调.解决冲突.提交更改的整个过程加以说明. 同上篇文章一样,写作本文的初始意图是因为目前的项目 ...

  10. VS添加节点

    很喜欢添加节点来减少代码的长度,方便阅读:VS快捷键和相关设置