未知大小的图片在指定大小的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. mysql5.6编译遇到错误

    -- Could NOT find Curses (missing:  CURSES_LIBRARY CURSES_INCLUDE_PATH)CMake Error at cmake/readline ...

  2. 谷歌浏览器:audio如何隐藏下载按钮

    当我们使用原生的audio标签时,可以看到如下的效果. 那么如何让下载按钮隐藏掉呢? 1. controlsList="nodownload" // 这个方法只支持 Chrome ...

  3. JavaWeb 服务启动时,在后台启动加载一个线程

    JavaWeb 服务启动时,在后台启动加载一个线程. 目前,我所掌握的一共有两种方法,第一种是监听(Listener),第二种是配置随项目启动而启动的Servlet. 下面对这两种方法做一简单的介绍, ...

  4. 机器学习 python库 介绍

    开源机器学习库介绍 MLlib in Apache Spark:Spark下的分布式机器学习库.官网 scikit-learn:基于SciPy的机器学习模块.官网 LibRec:一个专注于推荐算法的j ...

  5. iOS9 & iOS10 & iOS11 HTTP 不能正常使用的解决办法

    iOS9 & iOS10 & iOS11 HTTP 不能正常使用的解决办法 xcode  ios 291.4k 次阅读  ·  读完需要 8 分钟 54 今天升级Xcode 7.0 b ...

  6. RAC禁用DRM特性

    查看"_gc"开头的隐藏参数值: set linesize 333 col name for a35 col description for a66 col value for a ...

  7. POST—GET—两种提交方式的区别

        主要区别: 安全性 长度限制 数据结构.   总结起来: get方式:以URL字串本身传递数据参数,在服务器端可以从UERY_STRING'这个变量中直接读取,效率较高,但缺乏安全性,也无法来 ...

  8. shell篇(二)

    Linux的shell种类比较多,常见的有:Bourne Shell(/user/bin/sh或者/bin/sh), Bourne Again Shell(/user/bin/bash或者/bin/b ...

  9. Trove系列(八)——Trove的配置管理相关的功能介绍

    概述MySQL 配置管理功能允许Trove 用户重载由Trove服务的操作者提供的缺省MySQL配置环境.这是通过影响MySQL 的includedir 命令来实现的.这些MySQL 的include ...

  10. shell 命令总结

    删除0字节文件 find . -type f -size 0 -exec rm -rf {} \; find . type f -size 0 -delete 查看进程,按内存从大到小排列 ps -e ...