测试代码如下：（能够水平居中，通过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. 牛顿迭代法的理解与应用（ x 的平方根）

    题目来源与LeetCode算法题中的第69题,具体内容如下(点击查看原题): 实现 int sqrt(int x) 函数. 计算并返回 x 的平方根,其中 x 是非负整数. 由于返回类型是整数,结果只 ...

  2. HTTP 前世今生

    HTTP 协议在我们身边随处可见,只要上网就离不开它.不论是用浏览器还是 App,不论是看新闻.短视频还是听音乐.玩游戏,后面总会有 HTTP 在默默为你服务. Http 协议是怎么来的?最开始是什么 ...

  3. http_response_code()和header()

    1.http_response_code — 获取/设置响应的 HTTP 状态码向服务器发送成功状态码:http_response_code(200); 返回值如果提供了response_code,将 ...

  4. web--ajax--json

    案例: 其中,用eval()解析的话,如果json有一些代码,如:{"age":"alert(你好)"},他也会帮你实行,而JOSN.parse();则会自动报 ...

  5. js事件冒泡于事件捕获

    事件冒泡 事件捕获指的是从document到触发事件的那个节点,即自上而下的去触发事件. 事件冒泡是自下而上(从最深节点开始,向上传播事件)的触发事件 //例子 <div id="pa ...

  6. [源码分析]从"UDF不应有状态" 切入来剖析Flink SQL代码生成 (修订版)

    [源码分析]从"UDF不应有状态" 切入来剖析Flink SQL代码生成 (修订版) 目录 [源码分析]从"UDF不应有状态" 切入来剖析Flink SQL代码 ...

  7. C# 9 新特性：代码生成器、编译时反射

    前言 今天 .NET 官方博客宣布 C# 9 Source Generators 第一个预览版发布,这是一个用户已经喊了快 5 年特性,今天终于发布了. 简介 Source Generators 顾名 ...

  8. hdu_2124 Flying to the Mars & hdu_1800 Repair the Wall 贪心水题

    hdu_1800 简单排一下序,从大开始把比他小的都访问一遍,ans++: #include <iostream> #include <stdio.h> #include &l ...

  9. mysql建立ssl安全连接的配置

    mysql建立ssl安全连接的配置 1.环境.IP.安装包: centOS 5.4 虚拟机了两台服务器 mysql-5.1.48.tar.gz openssl-0.9.8b.tar.gz server ...

  10. C语言编程入门题目--No.14

    题目:将一个正整数分解质因数.例如:输入90,打印出90=233*5. 程序分析:对n进行分解质因数,应先找到一个最小的质数k,然后按下述步骤完成: (1)如果这个质数恰等于n,则说明分解质因数的过程 ...