css未知大小的图片居中
未知大小的图片在指定大小的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未知大小的图片居中的更多相关文章
- !!!css如何让img图片居中?css的display属性实现图片居中(代码实例)
在我们开发前端页面的时候,为了让页面效果美观,会让图片呈现居中效果.那么css怎么让img图片居中显示呢?本篇文章给大家带来css如何让img图片居中?css的display属性实现图片居中(代码实例 ...
- 用CSS让网页背景图片居中的方法
网页背景居中的方法有很多种的.这里介绍一些用CSS让背景图片居中的方法. 让背景图片居中的第一个方法是用像素设定,很多都用这种,但是也是最麻烦的: <div style="width: ...
- CSS中让背景图片居中且不平铺
background:url(../images/logo.jpg) no-repeat center ;
- 单个未知大小图片在div里面垂直居中的方法。。。添加辅助元素挤一下位置达到居中
单个未知大小图片在div里面垂直居中的方法...添加辅助元素挤一下位置达到居中 <div class="ServicesLiTopPic"> <i>&l ...
- css文字居中、图片居中、div居中解决方案
一.文字居中 若文字只有一行 <!--html代码--> <div class="box"> <p class="text"> ...
- 如何使用css来让图片居中不变形 微信小程序和web端适用
图片变形很多人祭奠出了妖魔鬼怪般的各种大法,比如使用jq来写,或者使用css表达式来写.今天我总结的是使用css3来写,唯一最大缺点就是对一些浏览器版本不够兼容.下面就是关于如何使用css来让图片居中 ...
- css图片居中,通过纯css实现图片居中的多种实现方法
在网页布局中,图文排版是我们常用的,那么经常会遇到如何让图片居中显示呢,这篇文章将总结常用css实现图片居中的方法总结: html结构: <div class="demo" ...
- 只用CSS实现容器内图片上下左右居中
一直以来,大家都知道,DIV容器内设置 text-align:center 即可让图片居中,但是DIV内默认的图片是上对齐,不会上下居中,如果想要实现这样的效果,JS判断是比较麻烦的,因为DIV容器内 ...
- CSS设置图片居中的方法
如果是应用了表格,那么设置单元格为align="center"就可以使其中的一切内容居中.如果没有应用表格要想设置图片居中就有点困难了.困难来自不按"常规出牌" ...
随机推荐
- 跨平台的移动应用开发框架-Sencha Touch
版权声明:本文为博主原创文章.未经博主同意不得转载. https://blog.csdn.net/tommychen1228/article/details/32959529 近期决定转以日常技术类文 ...
- POJ2983 Is the Information Reliable?
http://acm.sdut.edu.cn:8080/vjudge/contest/view.action?cid=267#problem/B B - ...
- testng入门教程4用TestNG执行case
使用TestNG类执行测试用例.这个类的主入口点在TestNG的框架运行测试.用户可以创建自己的TestNG的对象,并调用它以许多不同的方式: 在现有的testng.xml 合成testng.xml, ...
- excel 批量在一列数据添加单引号以及逗号
在A列后插入一列B1输入="'"&a1&"'," 然后向下填充 就ok 了 向下填充:选中上方连续单元格,鼠标放在选中区域右下角处(会显示“十” ...
- MFC六大核心机制之四:永久保存(串行化)
永久保存(串行化)是MFC的重要内容,可以用一句简明直白的话来形容其重要性:弄懂它以后,你就越来越像个程序员了! 如果我们的程序不需要永久保存,那几乎可以肯定是一个小玩儿.那怕我们的记事本.画图等小程 ...
- Codeforces 1146E Hot is Cold
题意: 给出一个序列,有两种操作: \(>\;x\) 将大于\(x\)的数全都取负 \(<\;x\) 将小于\(x\)的数全都取负 最后输出序列中的所有数最后的状态 思路: 我们先考虑对于 ...
- eclipse调优
基于Eclipse 4.7.0 (Oxygen) 目的:加快eclipse启动速度 修改eclipse安装目录下配置文件eclipse.ini(1)指定eclipse运行的jre,不让其进行搜索-vm ...
- BP神经网络的Java实现(转载)
神经网络的计算过程 神经网络结构如下图所示,最左边的是输入层,最右边的是输出层,中间是多个隐含层,隐含层和输出层的每个神经节点,都是由上一层节点乘以其权重累加得到,标上“+1”的圆圈为截距项b,对输入 ...
- Java设计模式应用——组合模式
组合模式实际上是一种树形数据结构.以windows目录系统举例,怎么样用java语言描述一个文件夹? 定义一个文件夹类,文件夹类中包含若干个子文件类和若干个文件类. 进一步抽象,把文件夹和文件都看做节 ...
- java多线程----JUC集合”01之 框架
java集合的架构.主体内容包括Collection集合和Map类:而Collection集合又可以划分为List(队列)和Set(集合). 1. List的实现类主要有: LinkedList, A ...