未知大小的图片在指定大小的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. 2.深度学习中的batch_size的理解

    Batch_Size(批尺寸)是机器学习中一个重要参数,涉及诸多矛盾,下面逐一展开. 首先,为什么需要有 Batch_Size 这个参数? Batch 的选择,首先决定的是下降的方向.如果数据集比较小 ...

  2. study mysql

    SELECT CONCAT(`_`.`drop_default`,`_`.`alter_default`,`_`.`update_default`) AS `sql` FROM ( -- 设置默认值 ...

  3. 代码编译 Compile、Make、Build 的区别

    代码编译 Compile.Make.Build 的区别 https://blog.csdn.net/fanzheng220112583/article/details/7780250 VC++6.0中 ...

  4. jxl(Java Excel API) 使用方法 【1】

    //   构建Workbook对象, 只读Workbook对象  //   直接从本地文档创建Workbook  //   从输入流创建Workbook Workbook workbook = nul ...

  5. mongodb部署

    windows版本 http://dl.mongodb.org/dl/win32/x86_64 安装教程 https://docs.mongodb.org/manual/tutorial/instal ...

  6. n的二进制中有几个1

    实例十七:n的二进制中有几个1 方法:result=n & (n-1)   n&(n-1)的目的使最低位的1不断翻转. 比如:n=108,其二进制表示为0110 1100,则n& ...

  7. 线段树(I tree)

    Codeforces Round #254 (Div. 2)E题这题说的是给了一个一段连续的区间每个区间有一种颜色然后一个彩笔从L画到R每个区间的颜色都发生了 改变然后 在L和R这部分区间里所用的颜色 ...

  8. 论文笔记:语音情感识别(五)语音特征集之eGeMAPS,ComParE,09IS,BoAW

    一:LLDs特征和HSFs特征 (1)首先区分一下frame和utterance,frame就是一帧语音.utterance是一段语音,是比帧高一级的语音单位,通常指一句话,一个语音样本.uttera ...

  9. Zookeeper学习记录(二):使用以及配置

    zookeeper已经介绍了它的原理设计以及实现方式,我们接下来介绍zookeeper的使用方法以及简单配置. 下载 获取Zookeeper的发布包,从Apache下载映像中下载一个最新稳定版本. 单 ...

  10. 页面点击,不是a标签也会刷新原因

    页面点击,不是a标签也会刷新原因 点击事件冒泡,触发了a链接导致整个页面刷新了.直接阻止 事件冒泡即可 例子: $("tr .am-text-danger").click(func ...