测试代码如下：（能够水平居中，通过text-align:center实现）

<style>
.box{ width:800px;height:600px;border:2px solid #000; text-align:center;}
span{ display:inline-block; height:100%; vertical-align:middle;}
img{ vertical-align:middle;}
</style>
</head>
<body>
<div class="box">
<img src="bigptr.jpg" /><span></span>
</div>

在img标签后边添加一个span标签，设置其显示方式为inline-block，高度为100%，vertical-align属性为middle；然后再给img标签页加上该vertical-align属性即可

转载原文：https://blog.csdn.net/skullsky/article/details/61915770

CSS之未知高度img垂直居中的更多相关文章

  1. css实现未知高度水平垂直居中

    页面设计中,经常需要实现元素的水平垂直居中,css实现的方法有很多(列如: margin: auto.position定位.css表达式calc().使用css预处理.table等都可以实现水平居中) ...

  2. css实现固定高度及未知高度文字垂直居中的完美解决方案

    在工作当中我们经常碰到类似于"固定高度文字垂直居中及未知高度垂直居中问题",或者 "图片垂直居中问题",而我们最容易会想到使用表格来垂直居中,或者如果是单行文字 ...

  3. CSS解决未知高度垂直居中

    尽管有CSS的vertical-align特性,但是并不能有效解决未知高度的垂直居中问题(在一个DIV标签里有未知高度的文本或图片的情况下). 标准浏览器如Mozilla, Opera, Safari ...

  4. CSS实现未知高度图文混合垂直居中

    (从已经死了一次又一次终于挂掉的百度空间人工抢救出来的,发表日期 2014-06-26) CSS实现未知高度图文混合垂直居中,阅读CSS实现未知高度图文混合垂直居中. IE6,IE7,FF3测试通过 ...

  5. 巧用CSS居中未知高度的块元素

    在网页中让一个未知高度的块元素水平垂直居中是一个老生常谈的问题,但是总是有些特殊场景让你无法得心应手的实现居中,本文介绍几种常用的经典的居中方法,总有一种适合你! 1. position .paren ...

  6. 用CSS让未知高度内容垂直方向居中

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title> ...

  7. CSS中如何实现未知尺寸图片垂直居中

    在曾经的 淘宝UED 招聘 中有这样一道题目: “使用纯CSS实现未知尺寸的图片(但高宽都小于200px)在200px的正方形容器中水平和垂直居中.” 当然出题并不是随意,而是有其现实的原因,垂直居中 ...

  8. div垂直居中的N种方法 单行/多行文字(未知高度/固定高度)

    说到这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?即使是某些浏览器不支持我只需做少许的 CSSHack技术就可以啊!所以在这里我还要啰嗦两句,CSS中的 ...

  9. CSS中有关水平居中和垂直居中的解决办法

    CCS中让div等块级元素在父级元素中居中的方法: (1)div{  margin:0 auto   } 该方法只能实现水平的居中,无法实现元素的垂直居中 (2)当div元素的宽高是固定的,然后设置位 ...

随机推荐

  1. python 进阶篇 迭代器和生成器深入理解

    列表/元组/字典/集合都是容器.对于容器,可以很直观地想象成多个元素在一起的单元:而不同容器的区别,正是在于内部数据结构的实现方法. 所有的容器都是可迭代的(iterable).另外字符串也可以被迭代 ...

  2. Spring Security 是如何在 Servlet 应用中执行的？

    Spring Security 是一个强大的认证和授权框架,它的使用方式也非常简单,但是要想真正理解它就需要花一时间来学习了,最近在学习 Spring Security 时有一些新的理解,特意记录下来 ...

  3. BUAA_OO 第二单元总结

    作业分析 第一次作业 本次作业是单次可捎带电梯的设计,主要是初步了解多线程的设计实现和测试,本身算法设计非常简单.这次作业整体来说不是很难,是多线程的入门,主要目的就是让我们认识,了解一下什么是多线程 ...

  4. MySQL基础知识和常用命令总结

    说明:以下内容是阅读书籍<<MySQL必知必会>>的摘要和总结 检索数据 排序检索数据 过滤数据 使用通配符过滤 使用正则表达式进行搜索 创建计算字段 使用数据处理函数 汇总数 ...

  5. curl请求curl_exec返回false，curl_error返回空

    网上查找了一下,由于采用https协议,一定要加入以下两句 curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false); //不验证证书下同 curl_setopt ...

  6. QML-密码管理器

    Intro 年初刚学Qml时写的密码管理器.用到Socket通信.AES加密等.UI采用Material Design,并实现了Android App的一些常见基本功能,如下拉刷新.弹出提示.再按一次 ...

  7. 记一次Pinpoint监控工具部署过程

    环境:Centos 7.4 X64IP:192.168.1.11 1.配置环境,先安装jdk 到Oracle官网下载安装JDK https://www.oracle.com/technetwork/j ...

  8. 《Android游戏开发详解》一1.7　控制流程第1部分——if和else语句

    本节书摘来异步社区<Android游戏开发详解>一书中的第1章,第1.7节,译者: 李强 责编: 陈冀康,更多章节内容可以访问云栖社区"异步社区"公众号查看. 1.7 ...

  9. pod setup命令失败解决方法

    最近运行pod setup出现以下问题: remote: Compressing objects: 100% (34/34), done.error: RPC failed; curl 56 SSLR ...

  10. Docker 1.13.0 详细更新日志

    本文讲的是Docker 1.13.0 详细更新日志[编者的话]Docker发布1.13.0版本,此次版本更新内容较多,以下为该版本具体的变更. 构建 添加在构建时可以指定镜像用作高速缓存源的功能. 这 ...