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 设置背景图 ...
随机推荐
- 斯坦福大学Andrew Ng教授主讲的《机器学习》公开课观后感［转］
近日,在网易公开课视频网站上看完了<机器学习>课程视频,现做个学后感,也叫观后感吧. 学习时间 从2013年7月26日星期五开始,在网易公开课视频网站上,观看由斯坦福大学Andrew Ng ...
- MapReduce: 一个巨大的倒退
前言 databasecolumn 的数据库大牛们(其中包括PostgreSQL的最初伯克利领导:Michael Stonebraker)最近写了一篇评论当前如日中天的MapReduce 技术的文章, ...
- C#Linq中的Union All/Union/Intersect和Top/Bottom和Paging和SqlMethods,skip,take,takewhile,skipwhile,编译查询等
我们继续讲解LINQ to SQL语句,这篇我们来讨论Union All/Union/Intersect操作和Top/Bottom操作和Paging操作和SqlMethods操作 . Union Al ...
- java生态环境
Which Java package do I need? Software Developers: JDK (Java SE Development Kit). For Java Developer ...
- mysql join的方式结果集
一张图说明 left join, right join, inner join, full outer join
- 火狐和ie下获取javascript 获取event
javascript 获取event 先从一个简单的例子说起,一个简单的button控件如下: <input type='button' name='mybtn' id='mybtn' oncl ...
- 数据结构线性表(js实现)
最近在复习数据结构的过程中,发现基本上数据结构都是用C来实现的,自己之前学习的时候也是用C去写的,由于目前对js更为熟悉一些,所以这里选择使用js去实现其中的某些算法和结构.实际上算法和语言关系不大, ...
- ASP.net MVC3 报错"未找到视图“Index”或其母版视图，或没有视图引擎支持搜索的位置 "的解决方法
注意添加MVC3视图不能直接在View文件下新建视图,而是在控制器的Index 右击添加视图,就会在View下面产生一个Product文件夹(包含Index.cshtml) 就可以解决这个问题. 具体 ...
- SQL SERVER 生成MYSQL建表脚本
/****** Object: StoredProcedure [dbo].[GET_TableScript_MYSQL] Script Date: 06/15/2012 13:05:14 ***** ...
- linux 编译安装nginx，配置自启动脚本
本文章来给各位同学介绍一篇关于linux 编译安装nginx,配置自启动脚本教程,希望有需要了解的朋友可一起来学习学习哦. 在公司的suse服务器装nginx,记录下安装过程: 参照这篇文章:Linu ...