测试代码如下：（能够水平居中，通过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. centos7 —— 网络连接问题

    今天用虚拟机(VM)安装好centos7后,发现无法连接网络,百思不得其解: 第一步:找到需要修改的文件位置,查明原因 #.查看网络是否可以ping通 ~ ping www.baidu.com #.查 ...

  2. 对JavaScript中原型及原型链的理解

    什么是原型:  1,我们所创建的每一个函数,解析器都会向该函数对象添加一个属性prototype,这个属性指向一个对象,这个对象就是我们所谓的原型对象 2,如果我们将函数作为普通函数调用时,proto ...

  3. 8、Flink Table API & Flink Sql API

    一.概述 上图是flink的分层模型,Table API 和 SQL 处于最顶端,是 Flink 提供的高级 API 操作.Flink SQL 是 Flink 实时计算为简化计算模型,降低用户使用实时 ...

  4. git在push时候出现timeout的解决方法

    1.先对照一下公钥是否正确:linux下生成的.ssh在~/.ssh,命令行直接cd ~/.ssh即可:2.本次出现的问题如下: 出现了连接不上的情况,传输协议用的是ssh,此时需要进行如下操作: 进 ...

  5. 前端JS—显示赋值（一）

    一:js代码必须位于<script>js代码</script> 把js代码放到<body>元素的地步,可以改善显示速度 二:js显示数据 使用 window.ale ...

  6. 2019-2020-1 20199329《Linux内核原理与分析》第一周作业

    Linux学习随笔 Linux 是一个操作系统,我们的 Linux 主要是系统调用和内核那两层. UNIX前身是Multics,但 UNIX 的商业版本非常昂贵,于是Linus Torvalds(Li ...

  7. How to permit SSH root Login in Ubuntu 18.04

    https://www.ubuntu18.com/ssh-permitrootlogin/ SSH root login is disabled by default in Ubuntu 18.04. ...

  8. 防cc攻击利器之Httpgrard

    一.httpgrard介绍 HttpGuard是基于openresty,以lua脚本语言开发的防cc攻击软件.而openresty是集成了高性能web服务器Nginx,以及一系列的Nginx模块,这其 ...

  9. QQ靓号资料空白且空间开通教程

    QQ靓号资料空白且空间开通教程 首先你需要两个QQ号第一个是普通QQ号第二个是去这个官方网站注册一个QQ免费靓号https://ssl.zc.qq.com/v3/index-chs.html?type ...

  10. Spring Boot 静态文件，请求不到，util文件夹

    静态文件貌似对util文件夹有特殊处理static/js/test.js 可以请求到static/js/laydate/test.js 可以请求到static/js/util/test.js 请求不到