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"就可以使其中的一切内容居中.如果没有应用表格要想设置图片居中就有点困难了.困难来自不按"常规出牌" ...
随机推荐
- vue-preview使用
1.安装 npm i vue-preview -S2.如果使用vue-cli生成的项目,需要修改webpack.base.conf.js文件中的loaders,添加一个loader{ test:/vu ...
- 微信小程序性能测试之jmeter踩坑秘籍(前言)
最近要做个微信小程序的性能压测,虽然之前只做过web端的,但想一想都是压后端的接口,所以果断答应了下来,之前对jmeter都是小打小闹,所以趁着这次机会好好摆弄摆弄. ---------------- ...
- Approximate Inference
1. Approximation Probabilistic model 中的一个 central task :给定一组observation X 后,计算latent variables ...
- 如何减少block的嵌套层次?
1.首先了解一个概念 函数式反应型编程(FRP) —— 实时互动应用开发的新思路 http://www.infoq.com/cn/articles/functional-reactive-progra ...
- 【环境变量】删掉centos原有的openjdk并安装sun jdk
一.卸载原有openjdk rpm -qa | grep java 之后,将展示出来的全部卸载掉,我这里是5个 rpm -e --nodeps java-1.7.0-openjdk-1.7.0.111 ...
- sql server 中的分区函数用法(partition by 字段)
partition by关键字是分析性函数的一部分,它和聚合函数不同的地方在于它能返回一个分组中的多条记录,而聚合函数一般只有一条反映统计值的记录,partition by用于给结果集分组,如果没 ...
- JSON—序列化
表单数据的序列化 用SerializeArray()将有效控件序列化为JSON对象数组? 包含name和value两个属性 SerializeArray()检测一组表单元素中的有效控件? 1.没有 ...
- bind,live,delegate
.live() 到目前为止,一切似乎很完美.可惜,事实并非如此.因为.live()方法并不完美,它有如下几个主要缺点: $()函数会找到当前页面中的所有td元素并创建jQuery对象,但在确认事件目标 ...
- MySQL从删库到跑路_高级(四)——存储过程
作者:天山老妖S 链接:http://blog.51cto.com/9291927 一.存储过程简介 1.存储过程简介 存储过程是一组具有特定功能的SQl语句集组成的可编程的函数,经编译创建并保存在数 ...
- Python: 字典列表: itemgetter 函数: 根据某个或某几个字典字段来排序列表
问题:根据某个或某几个字典字段来排序Python列表 answer: 通过使用operator 模块的itemgetter 函数,可以非常容易的排序这样的数据结构 eg: rows = [ {'fna ...