当前位置:首页 > 开发 > Web前端 > Css > 正文

CSS如何实现图片上下垂直居中

发表于: 2015-07-20   作者:一落叶而知秋   来源:转载   浏览:
摘要: CSS如何实现图片上下垂直居中: 在很多时候需要将图片上下垂直居中,不过没有一个直接了当的属性能够实现此功能。当然实现图片上下垂直居中的方法有多重,下面就简单介绍一下其中的两种。 方法一: 使用margin方式,使图片在div中上下垂直居中。margin-top值的计算方式是:div的高度/2-图片高度/2。 代码实例如下: <!DOCTYPE html> <html

CSS如何实现图片上下垂直居中:

在很多时候需要将图片上下垂直居中,不过没有一个直接了当的属性能够实现此功能。当然实现图片上下垂直居中的方法有多重,下面就简单介绍一下其中的两种。

方法一:

使用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;

 原文地址是:http://www.51texiao.cn/div_cssjiaocheng/2015/0503/593.html

最原始地址是:http://www.softwhy.com/

CSS如何实现图片上下垂直居中

  • 0

    开心

    开心

  • 0

    板砖

    板砖

  • 0

    感动

    感动

  • 0

    有用

    有用

  • 0

    疑问

    疑问

  • 0

    难过

    难过

  • 0

    无聊

    无聊

  • 0

    震惊

    震惊

编辑推荐
1. 让fieldset里面出现垂直滚动条 很多情况下,当fieldset中的内容很多时,我们希望不用自动延长fie
问题:假设有一个div,高宽都为200px,如何使得div内的内容水平居中? 很简单,设置该div的style.te
这篇文章是我早先保存下来的,昨天复习CSS垂直居中时偶然发现 原文地址已经失效了,但我觉得它写得
在一次次笔试,一次次的面试中,问到垂直居中的问题太多太多,但是我每一次回答,都好像都不能让面
在网页排版中,经常需要用浮动来让块元素在一行显示,这样做的话就不方便让多个浮动的块一起水平居
在网页排版中,经常需要用浮动来让块元素在一行显示,这样做的话就不方便让多个浮动的块一起水平居
原文链接: http://www.cnblogs.com/JuFoFu/p/4450162.html#undefined CSS居中算是一个比较基础的问
一、css元素垂直居中初始状态 <!DOCTYPE html> <html lang="en"> <head> <met
原始 demo html <div class ="box"> <div class="text"> 我是单行测试文字 </div>
效果 要求: 1.尽可能兼容更多浏览器,这里兼容到ie7,ie6不支持max-*就不考虑了。 2.浏览器尺寸变化
版权所有 IT知识库 CopyRight © 2009-2015 IT知识库 IT610.com , All Rights Reserved. 京ICP备09083238号