未知大小的图片在指定大小的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. isScroll的滚动组件的用法

    <div class="wrapper">  <ul>     <li>1</li>     <li>2</li& ...

  2. HTML5-CSS3-JavaScript(2)

    我们就从HTML5的基础总结起.希望可以提高自身的基础. HTML5 新增的通用属性 1. contentEditable 属性 HTML5 为大部分HTML元素都增加了contentEditable ...

  3. myeclipse连接并运行sql文件

    1:在工程目录上右键>new >SQL File  ,写入sql 2:在sql文件上面右键>execute sql files 3:选择数据库类型,并点击create创建一个连接: ...

  4. for练习相关

    for嵌套: 大圈套小圈思想:有一种重复的情况而这种情况每一次对应另外情况多次. ------------------------------------------------------- 例如: ...

  5. c#图像灰度化、灰度反转、二值化

    图像灰度化:将彩色图像转化成为灰度图像的过程成为图像的灰度化处理.彩色图像中的每个像素的颜色有R.G.B三个分量决定,而每个分量有255中值可取,这样一个像素点可以有1600多万(255*255*25 ...

  6. java的poi技术读取Excel数据

    这篇blog主要是讲述java中poi读取excel,而excel的版本包括:2003-2007和2010两个版本, 即excel的后缀名为:xls和xlsx. 读取excel和MySQL相关: ja ...

  7. MySQL实现SQL Server排名函数

    最近在MySQL中遇到分组排序查询时,突然发现MySQL中没有row_number() over(partition by colname)这样的分组排序.并且由于MySQL中没有类似于SQL Ser ...

  8. Web前端开发推荐阅读书籍、学习课程下载

    转自http://www.xuanfengge.com/fe-books.html 前言 学校里没有前端的课程,那如何学习JavaScript,又如何使自己成为一个合格的前端工程师呢? 除了在项目中学 ...

  9. SQL 中【NULL】和【无】烦躁的问题

    很烦躁,烦躁的很,总结一下. 先简单的说下: NULL   : 不确定的东西 无       :没有东西 复杂的见下文....... 一 .null值 下面举个最简单的例子,平常工作当中肯定比这个sq ...

  10. Oracle 启动的时候需要的服务