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 设置背景图 ...
随机推荐
- network Driver , TDI（Transport Driver Interface） Drivers
https://msdn.microsoft.com/en-us/library/windows/hardware/ff565094(v=vs.85).aspx https://msdn.micros ...
- 【C++11】30分钟了解C++11新特性
作者:王选易,出处:http://www.cnblogs.com/neverdie/ 欢迎转载,也请保留这段声明.如果你喜欢这篇文章,请点[推荐].谢谢! 什么是C++11 C++11是曾经被叫做C+ ...
- 怎么给ABBYY FineReader Mac导入图像
ABBYY FineReader Pro for Mac作为ABBYY旗下重要的OCR文字识别软件之一,专为Mac用户定制,为各种各样的任务提供了单一.全面的解决方案,它是所有需要扫描和处理数字纸质文 ...
- 使用iBATIS3.0完成增删改查
使用iBATIS3.0完成增删改查 iBATIS3.0和以前的版本有一些改变,不过学过以前版本的再学习3.0应该不是太难,3.0要求JDK1.5支持,因为其中增加了注解和泛型,这些都是JDK1.5才有 ...
- 011. asp.net内置对象
Response对象: Response代表了服务器响应对象, 主要用于将数据从服务器发送回浏览器; 每次客户端发出一个请求的时候,服务器就会用一个响应对象来处理这个请求,处理完这个请求之后,服务器就 ...
- unity htc vive, ugui for vr
http://wacki.me/blog/2016/06/vr-gui-input-module-for-unity-htc-vive/
- Externalizable接口 序列化
Java默认的序列化机制非常简单,而且序列化后的对象不需要再次调用构造器重新生成,但是在实际中,我们可以会希望对象的某一部分不需要被序列化,或者说一个对象被还原之后, 其内部的某些子对象需要重新创建, ...
- 通过改变计算机策略来解决“只能通过Chrome网上应用商店安装该程序”的方法及模版文件下载
通过改变计算机策略来解决“只能通过Chrome网上应用商店安装该程序”的方法及模版文件下载 操作步骤 1.开始 -> 运行 -> 输入gpedit.msc -> 回车确定打开计算机本 ...
- C语言中的数组和指针以及字符串
数组名同时也是该数组首元素的地址,而指针提供了一种用来使用地址的符号方法,因此指针能够很有效地处理数组. 将一个整数加给指针,这个整数会和指针所指类型的字节数相乘,然后所得的结果会加到初始地址上 da ...
- 详解Android首选项框架ListPreference
详解Android首选项框架ListPreference 原文地址 探索首选项框架 在深入探讨Android的首选项框架之前,首先构想一个需要使用首选项的场景,然后分析如何实现这一场景.假设你正在编写 ...