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;
CSS如何实现图片上下垂直居中的更多相关文章
- CSS制作图片水平垂直居中
所谓的图片水平垂直居中就是把图片放在一个容器元素中(容器大于图片尺寸或是指定了大小的容器),并且图片位居此容器正中间(中间是指元素容器的正中间),而图片不是以背景图片(background-image ...
- CSS制作图片水平垂直居中 亲测推荐
空白标签实现图片的垂直居中 这种方法很有意思,也很有独特之处,我的思路也是来自于张鑫旭-鑫空间-鑫生活写的<大小不固定的图片.多行文字的水平垂直居中>一文中的使用空白图片实现垂直对齐.他主 ...
- css之line-height及图片文字垂直居中
css虽然没有算法,但还是很神奇的,踩到坑都不知道到底是哪里?看到张鑫旭大佬的博客讲的超级好https://www.zhangxinxu.com 行高line-height用到的频率极高,指一行文字的 ...
- css 图片文字垂直居中
先来看张图片 相信很多css新手遇到过这种问题,就是当图片和文本显示在一行的时候,效果很奇葩,文字和图片没法对齐, 这时我们需要做的是: 1,先给块级元素设置 display: inline-bloc ...
- css实现图片水平垂直居中
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- css图片上下垂直居中
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- css确定元素水平居中和垂直居中
---恢复内容开始--- 首先,我们在了解如何通过css了解元素水平和垂直居中之前,先要了解下html都有哪些元素,这些元素与偶有哪些分类,因为不同类别的元素的水平垂直居中方法是完全不同的,究其根本当 ...
- 如何利用CSS代码使图片和文字在同一行显示且对齐
对于初学css的新手朋友来说,经常会遇到这样一个问题,当文字和图片出现在同一行或者同一个div里面的时候,在浏览器中运行出来的显示效果往往是在不同的行,那么,我们怎么才能利用CSS代码使图片和文字在同 ...
- CSS背景background图片
一.CSS背景background图片 - TOP 1.背景图片语法background-image:url() 引入背景图片background-repeat:no-repeat 设置背景图 ...
随机推荐
- JSBinding + SharpKit / 使用 Firefox 调试 JS
已经准备好,google打不开,等打开了再贴图上来
- Valgrind使用[转]
简介 调试程序有很多方法,例如向屏幕上打印消息,使用调试器,或者只需仔细考虑程序如何运行,并对问题进行有根有据的猜测. 在修复 bug 之前,首先要确定在源程序中的位置.例如,当一个程序产生崩溃或生成 ...
- addClass的用法和is函数的用法
<html> <head> <meta charset="utf-8"> <script type="text/javascri ...
- Android 反编译 代码注入之HelloWorld
为了向经典的"Hello, World"致敬,我们也从一个简单的程序开始HelloWorld.apk.当你把这个APK安装到手机上运行后,在屏幕上就显示一行文字"Hell ...
- Js中的window.parent ,window.top,window.self ,window.openner详解
在应用有frameset或者iframe的页面时,parent是父窗口,top是最顶级父窗口(有的窗口中套了好几层frameset或者iframe),self是当前窗口, opener是用open方法 ...
- bash内部命令-1
外置命令 date expr seq nohup tput bash内置命令 trap set shopt date Linux时钟分为系统时钟(System Clock)和硬件(Real Time ...
- OpenJudge计算概论-中位数
/*============================================================== 中位数 总时间限制: 2000ms 内存限制: 65536kB 描述 ...
- 【转载】onclick与onCommand的区别
这两个事件没有本质区别,都是点击执行一个事件.不同在于传递的参数不一 样,OnClick (object sender, EventArgs e),OnCommand (object sender, ...
- MVC2、MVC3、MVC4、MVC5之间的区别 以及Entity Framework 6 Code First using MVC 5官方介绍教程
现在MVC的技术日趋成熟,面对着不同版本的MVC大家不免有所迷惑 -- 它们之间有什么不同呢?下面我把我搜集的信息汇总一下,以便大家能更好的认识不同版本MVC的功能,也便于自己查阅. View Eng ...
- EmEditor处理大文本文件
前段时间新闻网由于用户不当操作.导致三年的报纸栏目内容全部清空.紧急情况下只能求助于SQL数据恢复.但备份的数据文件有500M左右. 首先用的文本编辑器是Notepad++,打开之后软件几乎完全卡死. ...