测试代码如下：（能够水平居中，通过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. SpringCloud(四)学习笔记之Feign

    Feign是一个声明式的Web服务客户端,可帮助我们更加便捷.优雅地调用HTTP API Feign可以与Eureka和Ribbon组合使用以支持负载均衡 一.构建Eureka Server [基于第 ...

  2. numpy+sklearn 手动实现逻辑回归【Python】

    逻辑回归损失函数: from sklearn.datasets import load_iris,make_classification from sklearn.model_selection im ...

  3. C#线程学习笔记

    本笔记摘抄自:https://www.cnblogs.com/zhili/archive/2012/07/18/Thread.html,记录一下学习,方便后面资料查找 一.线程的介绍 进程(Proce ...

  4. 关于join on 和单表查询的实时效果

    当数据量大(10W单位级)的时候,join的优势,会被单表查询超过. 以下是两张表单查和两张表联查的时间对比,同时,这样的记录有局限性的. 一.数据量少时: 单表查: 表一:显示行 0 - 2 ( 3 ...

  5. thinkphp--导入导出xls文件

    /** * 数组转xls格式的excel文件 * @param array $data 需要生成excel文件的数组 * @param string $filename 生成的excel文件名 * 示 ...

  6. 作业3-k均值算法

    4. 作业: 1). 扑克牌手动演练k均值聚类过程:>30张牌,3类 2). *自主编写K-means算法 ,以鸢尾花花瓣长度数据做聚类,并用散点图显示.(加分题) 3). 用sklearn.c ...

  7. Web性能优化之-深入理解TCP Socket

    什么是Socket?    大家都用电脑上网,当我们访问运维社区https://www.unixhot.com的时候,我们的电脑和运维社区的服务器就会创建一条Socket,我们称之为网络套接字.那么既 ...

  8. JVM原理与深度调优（一）

    什么是jvm jvm是java虚拟机 运行在用户态.通过应用程序实现java代码跨平台.与平台无关.实际上是"一次编译,到处执行" 1.从微观来说编译出来的是字节码!去到哪个平台都 ...

  9. 创建线程的方式三：实现Callable接口-----JDK5.0 新增

    package com.yhqtv.java2; /* * 创建线程的方式三:实现Callable接口-----JDK5.0 新增 * * 如何理解实现Callable接口的方式创建多线程比实现Run ...

  10. Spring MVC 中的http Caching

    文章目录 过期时间 Last-Modified ETag Spring ETag filter Spring MVC 中的http Caching Cache 是HTTP协议中的一个非常重要的功能,使 ...