未知高度的图片垂直居中显示

在HTML代码中对未知高度的图片进行垂直居中显示

操作方法

  • 01

    方法一： <!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>图片垂直居中</title><style>.box{ width:800px; margin:0 auto; 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><h3><center>图片垂直居中一</center></h3><div class="box">    <img src="http://img03.taobaocdn.com/imgextra/i3/263817957/TB2Wqr5apXXXXbnXXXXXXXXXXXX-263817957.jpg" /><span></span></div></body></html>

  • 02

    方法二： <!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>图片垂直居中</title><style>.box{ width:800px; margin:0 auto; height:600px;border:2px solid #000;display:table;position:relative; overflow:hidden;}span{ display:table-cell; text-align:center; vertical-align:middle;*position:absolute;left:50%;top:50%;}img{ *position:relative; vertical-align:top;left:-50%;top:-50%;}</style></head><body><h3><center>图片垂直居中二</center></h3><div class="box">    <span><img src="http://img03.taobaocdn.com/imgextra/i3/263817957/TB2Wqr5apXXXXbnXXXXXXXXXXXX-263817957.jpg" /></span></div></body></html>

赞 (0)

相关推荐

  • 插入到Word文档中的图片不显示的原因

    今天，有人来问“为什么在Word文档中插入图片，只显示图片最下面的一小部分？”如图，红色部分插入的图片只能显示部分。 这种情况还没遇到过，把文档拿来一看，还真是怎么调整，图片都不出来，但是新建文档插入 ...

  • 电脑PPT如何将插入图片居中显示

    电脑PPT如何将插入图片居中显示

    PPT 是我们现在经常使用的办公软件之一.今天小编就告诉大家电脑PPT如何将插入图片居中显示.具体如下:1. 首先我们先打开电脑中的PPT.进入之后点击上方功能栏中的插入选项,2. 然后再点击下方一栏 ...

  • 如何解决PS放大图片后显示模糊问题

    如何解决PS放大图片后显示模糊问题

    PS是现在十分常用的一款图片编辑软件,有些用户遇到了放大图片后显示模糊问题,想知道如何解决,接下来小编就给大家介绍一下具体的操作步骤.具体如下:1. 首先第一步打开电脑中的PS软件,先导入并放大图片, ...

  • 解释插入到Word文档中的图片不显示的原因

    今天,有人来问"为什么在Word文档中插入图片,只显示图片最下面的一小部分?"如图,红色部分插入的图片只能显示部分. 这种情况还没遇到过,把文档拿来一看,还真是怎么调整,图片都不出 ...

  • win7图片只显示图标不显示预览图即小图.中图.大图

    问题描述： win7上图片只显示图标，不显示缩略图;不管是调节小图、中图还是大图或者其他均不显示;而且这种情况下使用截图工具截下来的图片都不自动带上扩展名;情况如下图： 解决方案： 打开计算机—》组织 ...

  • win7系统图片只显示图标不显示预览图的解决方法

    win7上图片只显示图标，不显示缩略图;不管是调节小图、中图还是大图或者其他均不显示;而且这种情况下使用截图工具截下来的图片都不自动带上扩展名，怎么办呢? 解决方案： 打开计算机—》组织—》文件夹和搜 ...

  • win7的图片只显示图标如何像xp一样显示预览图呢

    在win7系统里，正常情况下我们要浏览图片的时候，会发现win7的图片只显示图标，不显示预览图。如果我们要在一堆图片中找到想要的一张就得一张一张的打开查看，很麻烦。怎样才能让win7图片也像xp图片显 ...

  • 如何解决在浏览网页时网页图片不能显示的问题

    网络上丰富的图文资源极大地丰富了我们的生活，也提供了许多生动的信息。然而，许多网友在浏览网页时遇到网页图片不能显示的问题，给网络应用带来了很大的不便。造成网页图片不能显示的原因很多，现在，我们通过多种 ...

  • Word 2003 让图片快速显示

    Word 2003 让图片快速显示 大家在使用Word 2003时，会发现一个问题，如果文章内容多，里面插入的图片显示会很慢，那有什么办法来解决呢？其实方法很简单。 首先在每次打开带有多张图片的文件时 ...