方法一:

使用margin方式，使图片在div中上下垂直居中。margin-top值的计算方式是:div的高度/2-图片高度/2。

代码实例如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style type="text/css">
div
{
  height:400px;
  width:400px;
  border:1px solid red;
}
div img {margin-top:127px;}
</style>
</head>
<body>
<div><img src="mytest/demo/border.jpg" alt="蚂蚁部落"></div>
</body>

</html>

方式二:
代码实例如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style type="text/css">
div
{
  height:400px;
  width:400px;
  border:1px solid red;
  vertical-align:middle;
  display:table-cell;
}
</style>
</head>
<body>
<div><img src="mytest/demo/border.jpg" alt="蚂蚁部落" /></div>
</body>
</html>

以上代码实现了图片上下垂直居中，不过IE7浏览器并不支持此方式。
实现方式在div中添加了如下代码:

vertical-align:middle; 
display:table-cell;
 line-height:400px;

CSS如何实现图片上下垂直居中的更多相关文章

  1. CSS制作图片水平垂直居中

    所谓的图片水平垂直居中就是把图片放在一个容器元素中(容器大于图片尺寸或是指定了大小的容器),并且图片位居此容器正中间(中间是指元素容器的正中间),而图片不是以背景图片(background-image ...

  2. CSS制作图片水平垂直居中 亲测推荐

    空白标签实现图片的垂直居中 这种方法很有意思,也很有独特之处,我的思路也是来自于张鑫旭-鑫空间-鑫生活写的<大小不固定的图片.多行文字的水平垂直居中>一文中的使用空白图片实现垂直对齐.他主 ...

  3. css之line-height及图片文字垂直居中

    css虽然没有算法,但还是很神奇的,踩到坑都不知道到底是哪里?看到张鑫旭大佬的博客讲的超级好https://www.zhangxinxu.com 行高line-height用到的频率极高,指一行文字的 ...

  4. css 图片文字垂直居中

    先来看张图片 相信很多css新手遇到过这种问题,就是当图片和文本显示在一行的时候,效果很奇葩,文字和图片没法对齐, 这时我们需要做的是: 1,先给块级元素设置 display: inline-bloc ...

  5. css实现图片水平垂直居中

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. css图片上下垂直居中

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. css确定元素水平居中和垂直居中

    ---恢复内容开始--- 首先,我们在了解如何通过css了解元素水平和垂直居中之前,先要了解下html都有哪些元素,这些元素与偶有哪些分类,因为不同类别的元素的水平垂直居中方法是完全不同的,究其根本当 ...

  8. 如何利用CSS代码使图片和文字在同一行显示且对齐

    对于初学css的新手朋友来说,经常会遇到这样一个问题,当文字和图片出现在同一行或者同一个div里面的时候,在浏览器中运行出来的显示效果往往是在不同的行,那么,我们怎么才能利用CSS代码使图片和文字在同 ...

  9. CSS背景background图片

    一.CSS背景background图片   -   TOP 1.背景图片语法background-image:url() 引入背景图片background-repeat:no-repeat 设置背景图 ...

随机推荐

  1. 【转】BLE_CC2540_初学者入门指导

    原文网址:http://www.deyisupport.com/question_answer/wireless_connectivity/bluetooth/f/103/t/61462.aspx 看 ...

  2. java 将长度很长的字符串(巨大字符串超过4000字节)插入oracle的clob字段时会报错的解决方案

    直接很长的字符串插入到clob字段中会报字符过长的异常,相信大家都会碰到这种情况 String sql = "insert into table(request_id,table_name, ...

  3. C# typeof()实例详解

    typeof(C# 参考) 用于获取类型的 System.Type 对象.typeof 表达式采用以下形式: System.Type type = typeof(int);  备注 若要获取表达式的运 ...

  4. HTTP缓存ETAG和Last-Modified

    1) 什么是"Last-Modified"? 在浏览器第一次请求某一个URL时,服务器端的返回状态会是200,内容是你请求的资源,同时有一个Last-Modified的属性标记此文 ...

  5. 详尽介绍FireFox about:config

    一.什么是about:config about: config: 是Firefox的设置页面,Firefox提供了不少高级设置选项在这里以便让你可以更加详细地控制Firefox的运行方式.官方不推荐 ...

  6. 阿里云centos增加swap(虚拟内存)

    我的阿里云服务器默认是没有配swap交换文件. 创建swap根目录 mkdir /swap 创建swap dd if=/dev/zero of=/swap/swap bs=1024 count=102 ...

  7. discuz 发布分类信息，能不能设置单版块去掉“发帖子”（默认点发帖后为自定义的默认分类信息模版）

    http://www.discuz.net/forum.php?mod=viewthread&tid=3365198&page=1#pid26849156

  8. android 各国语言对应的缩写

    android资源文件夹的写法规则: 语言缩写-国家地区缩写 语言缩写 藏语:bo_CN en 英文 en_US 英文 (美国) ar 阿拉伯文 ar_AE 阿拉伯文 (阿拉伯联合酋长国) ar_BH ...

  9. 修改webftp，在线文件管理

    项目中要添加一个文件管理功能,允许用户维护自己的静态HTML文件. 在网上找了一个现成的在线PHP文件管理工具:webftp 下载地址:http://down.chinaz.com/soft/3067 ...

  10. cmd命令运行php，php通过cmd运行文件

    一.cmd命令运行php 1.通过配置环境变量 >php "php文件" 如果要待参数 php -q "php文件" 参数 php获取参数 $a = $a ...