-
Web开发教程--如何让图片在div中垂直居中
2015-06-19 18:31:47该方法是将外部容器的显示模式设置成display:table,img标签外部再嵌套一个span标签,并设置span的显示模式为display:table-cell,这样就可以很方便的使用vertical-align象表格元素那样对齐了,当然这只是在标准...方法一:
该方法是将外部容器的显示模式设置成display:table,img标签外部再嵌套一个span标签,并设置span的显示模式为display:table-cell,这样就可以很方便的使用vertical-align象表格元素那样对齐了,当然这只是在标准浏览器下,IE6/IE7还得使用定位。
HTML代码
<div id="box">
<span><img src="images/demo.jpg" alt="" /></span></div>
CSS代码
<style type="text/css">
#box{
width:500px;height:400px;
display:table;
text-align:center;
border:1px solid #d3d3d3;background:#fff;
}
#box span{
display:table-cell;
vertical-align:middle;
}
#box img{
border:1px solid #ccc;
}
</style>
<!--[if lte IE 7]>
<style type="text/css">
#box{
position:relative;
overflow:hidden;
}
#box span{
position:absolute;
left:50%;top:50%;
}
#box img{
position:relative;
left:-50%;top:-50%;
}
</style>
<![endif]-->
方法二:
方法二和方法一的实现的原理大同小异,结构也是相同的,方法一用的是条件注释,方法二就用的CSS Hack。
CSS代码
<style type="text/css">
#box{
width:500px;height:400px;
overflow:hidden;
position:relative;
display:table-cell;
text-align:center;
vertical-align:middle;
border:1px solid #d3d3d3;background:#fff;
}
#box span{
position:static;
*position:absolute; /*针对IE6/7的Hack*/
top:50%; /*针对IE6/7的Hack*/
}
#box img {
position:static;
*position:relative; /*针对IE6/7的Hack*/
top:-50%;left:-50%; /*针对IE6/7的Hack*/
border:1px solid #ccc;
}
</style>
该方法有个弊端,在标准浏览器下由于外部容器#box的显示模式为display:table-cell,所以导致#box无法使用margin属性,并且在IE8下设置边框也无效。
方法三:
标准浏览器还是将外部容器#box的显示模式设置为display:table-cell,IE6/IE7是利用在img标签的前面插入一对空标签的办法。
HTML代码
<div id="box">
<i></i><img src="images/demo.jpg" alt="" />
</div>
CSS代码
<style type="text/css">
#box{
width:500px;height:400px;
display:table-cell;
text-align:center;
vertical-align:middle;
border:1px solid #d3d3d3;background:#fff;
}
#box img{
border:1px solid #ccc;
}
</style>
<!--[if IE]>
<style type="text/css">
#box i {
display:inline-block;
height:100%;
vertical-align:middle
}
#box img {
vertical-align:middle
}
</style><![endif]-->
方法四:
在img标签外包裹一个p标签,标准浏览器利用p标签的伪类属性:before来实现,IE6/IE7使用了CSS表达式来实现兼容。
HTML代码
<div id="box">
<p><img src="images/demo.jpg" alt="" /></p>
</div>
CSS代码
#box{
width:500px;height:400px;
text-align:center;
border:1px solid #d3d3d3;background:#fff;
}
#box p{
width:500px;height:400px;
line-height:400px; /* 行高等于高度 */
}
/* 兼容标准浏览器 */
#box p:before{
content:"."; /* <a href="http://casinogreece.gr/">????????????</a> 具体的值与垂直居中无关,尽可能的节省字符 */
margin-left:-5px; font-size:10px; /* 修复居中的小BUG */
visibility:hidden; /*设置成隐藏元素*/
}
#box p img{
*margin-top:expression((400 - this.height )/2); /* CSS表达式用来兼容IE6/IE7 */
vertical-align:middle;
border:1px solid #ccc;
}
使用:beforr这个方法对于标准浏览器来说比较给力,也没发现有副作用,但是对于IE6/IE7,如果对性能要求较高的话CSS表达式的方法要慎用。
方法五:
该方法针对IE6/IE7,将图片外部容器的字体大小设置成高度的0.873倍就可以实现居中,标准浏览器还是使用上面的方法来实现兼容,并且结构也是比较优雅。
HTML代码
<div id="box">
<img src="images/demo.jpg" alt="" />
</div>
CSS代码
#box{
width:500px;height:400px;
text-align:center;
border:1px solid #d3d3d3;background:#fff;
/* 兼容标准浏览器 */
display: table-cell;
vertical-align:middle;
/* 兼容IE6/IE7 */
*display:block;
*font-size:349px; /* 字体大小约为容器高度的0.873倍 400*0.873 = 349 */
*font-family:Arial; /* 防止非utf-8引起的hack失效问题,如gbk编码 */
}
#box img{
vertical-align:middle;
}
设置字体大小的方法感觉比较怪异,也没有看到一个合理的解释,只知道图片元素有一些不同于其他元素的特性,但是对于IE6/IE7来说,这个方法还是比较给力的。
思考:很多方法都是依赖于将外部容器的显示模式设置成table才能实现垂直居中,也就是div来模拟table。 -
如何让图片在div中水平垂直居中
2016-03-27 20:26:38在使图片完全居中于框内,采用div 里的padding margin ...在div里加一个table的表格,用表格的属性是在表格里的图片实现居中。 其中 [color=red]align[/color] 是水平对齐方式。[color=red]valign[/color] 是水平对...在使图片完全居中于框内,采用div 里的padding margin 属性是无法保证100%的居中的
可采用以下方法:
[color=green]<div class="picturead"><table height="100%" align="center" valign="middle">
<tr><td>
<img src="images/picture.png"></img></td></tr></table></div>
[/color]
在div里加一个table的表格,用表格的属性是在表格里的图片实现居中。
其中 [color=red]align[/color] 是水平对齐方式。[color=red]valign[/color] 是水平对齐方式。 -
img图片在div中垂直居中 + 剪切 + 等比例缩放
2020-06-20 10:23:03外层div,内层img,如何让img在div内水平垂直居中展示呢? 上面已经实现了图片在div中水平垂直居中展示了,那下面就是如何隐藏掉图片超出div的部分:外层div,内层img,如何让img在div内水平垂直居中展示呢?
上面已经实现了图片在div中水平垂直居中展示了,那下面就是如何隐藏掉图片超出div的部分:
-
纯CSS如何让图片以及DIV垂直居中显示
2018-07-16 17:30:19有时候我们会纠结于如何让这两种元素在父容器DIV中垂直居中显示(当然 ,这里我们抛开表格布局不谈,因为表格可以让内容自动垂直居中) 1. 对于图片,如下所示: .container{ ...纯CSS如何让图片以及DIV垂直居中显示?
转载自https://www.xuebuyuan.com/2867624.html
图片,也就是img标签,行内元素;div,块级元素。
有时候我们会纠结于如何让这两种元素在父容器DIV中垂直居中显示(当然 ,这里我们抛开表格布局不谈,因为表格可以让内容自动垂直居中)
1. 对于图片,如下所示:
.container{ height:350px; border:1px solid #DDDDDD; text-align: center; line-height:350px; } .container img{ vertical-align: middle; max-height: 350px; max-width:350px; }
即可让它自动垂直居中了,至于个中原理,
text-align: center;
让子元素横向居中显示,这个大家都知道,
vertical-align: middle;
让行内元素自身纵向居中显示,但是有了这个属性就一定能垂直居中了吗?
答案是否定的,相信大多数童鞋都在这碰过壁了,认为明明设置了纵向居中,为什么不生效? 我们必须在父容器上加上line-height:350px;
设置父容器的行高才行,这两个属性缺一不可。
2. 对于div
对于div的居中,我之前一向用的
{ position:absolute; left:50%; top:50%; margin-left:-100px; margin-top:-50px; height:100px; width:200px; }
这种方式来实现,然而最近我发现了另一种方式似乎更优雅一些
{ position:absolute; margin:auto; left:0; top:0; right:0; bottom:0; height:100px; width:200px; }
-
高度不定垂直居中_如何让不固定大小的自适应图片在不固定高度的div中垂直居中?...
2020-12-24 15:32:00经常接触到一些文字图片环绕的布局,或者文字和插图左右布局的场景,正好此前在移动端开发中,碰到有一个这样的需求,左边文字是不定字数的,右边是一个插图,不管左边文字是多少,右边插图都要在这个div中垂直居中... -
纯CSS如何让图片以及DIV垂直居中显示?
2015-01-05 12:08:45有时候我们会纠结于如何让这两种元素在父容器DIV中垂直居中显示(当然 ,这里我们抛开表格布局不谈,因为表格可以让内容自动垂直居中) 1. 对于图片,如下所示: .container{ height:350px; border:1px ... -
如何让div在整个屏幕中垂直居中
2016-08-29 16:06:49如图,若将中间登录页保持在垂直居中位置 css代码操作如下: .container{ width:100%; height:548px; top:50%; position:absolute; margin:-274px 0px 0px 0px; } 其中:top 表示距离顶端的距离, ... -
div+css中如何让图片垂直居中显示
2013-11-07 21:36:01本来以为垂直居中使用 vertical-align:middle就可以了,但是在Div中就不起作用。 文字 这样写文字就不能垂直居中,因为vertical-align:middle这句不起作用(水平居中text-align:center是可以的) 所以Div中... -
如何让图片在垂直方向与 div的底部对齐 水平居中
2016-04-06 21:07:00需要图片的绝对定位postion: absolute. 一般定位时, 是用div去定位. 一般不直接用 非div去"绝对/相对"定位....然后, 再在 定位的div中, 去设置其中包含的内容的 水平对齐等方式. 因此, 有这样的思路, 如果 要求 某... -
div中图片居中
2013-05-23 11:14:38Div与CSS布局,最让人头疼的就是容器内的东西如何垂直居中的问题,我在做站时也遇到,查了一下资料,总结出以下居中办法,兼容IE与及Firefox 虽然下述方法可以解决问题, 但较为繁琐,还不如直接用table来处理。 ... -
div里面图片垂直居中的几个例子
2008-04-20 12:59:00在div-css布局运用中,如何让图片在容器里垂直居中是很多人询问的问题,这里收集了几个例子WWYTechFeel第一个例子 ... -
图片在容器里垂直居中
2010-01-25 09:40:00在div-css布局运用中,如何让图片在容器里垂直居中是很多人询问的问题,这里收集了几个例子 第一个例子<!DOCTYPE ... -
div中的p标签于img设置同一水平_CSS篇面试题2如何让一个长度未知的图片水平和垂直方向均居中...
2021-01-07 18:34:47虽互不曾谋面,但希望能和您成为笔尖下的朋友以读书,技术,生活为主,...━前言元素水平垂直居中是 web 开发中常见遇到的问题方法 1-使用transform + absolute这个组合,常用于图片的居中显示,子元素设置绝对定位,父级... -
前端开发css中怎么让图片居中?css图片居中的方法总结
2020-06-24 14:57:36在进行网页布局的时候,有时候图片的位置可能会影响整个页面的美观程度,所以对于图片的放置位置就得变化,那么,接下来的这篇文章将给大家来介绍关于图片在网页中如何使用css实现居中的方法,对于有需要的朋友来说... -
实现图片、多行文本垂直居中:display的table和table-cell搭配效果
2019-03-08 09:25:25display:table和table-cell是如何让多行文字在块内垂直居中? 网页中见过的案例效果: HTML: &lt;div class="parent"&gt; &lt;p class="son"&... -
dev 居中_div居中:最全的div居中方法总结
2020-12-19 10:59:51那么今天我就给他大家总结下利用CSS实现DIV居中和利用JS/JQ进行居中的几种方法:CSS实现Div居中的方法:上面文章中的实例代码就是如何利用CSS让DIV处于一个永远居中的状态,不管屏幕如何滑动,该p始终保持在屏幕正... -
CSS如何让图片垂直并水平居中等比缩放?
2012-08-27 11:42:00CSS如何让图片垂直并水平居中等比缩放? 7:55 PM on 2009-12-18 Reply | Web优化 | CSS ( 49 ), div ( 10 ), 图片居中 这里先介绍一下淘宝网是如何处理这个问题的,刚在网上查找解决方法时,发现淘宝网现前端... -
css 居中问题
2011-02-16 10:08:00CSS居中问题一直是大家比较关注的问题,在此前的CSS在线的...而根据居中方向划分为:水平居中和垂直居中。下面让我们来一一详述:CSS 设置水平居中A.如何设置CSS实现DIV的水平居中 CSS样式 div {margin-left: auto;... -
CSS居中问题汇总附实例
2012-01-17 23:17:26CSS居中问题一直是大家比较关注的问题,在此前的CSS在线的文章中也曾多次提到过CSS居中的相关话题,今天对CSS居中问题做一个汇总。 CSS居中问题,根据居中对象划分主要包括:DIV居中,图片居中,以及文字居中。而根据... -
微影院线-今日头条广告总结
2017-03-30 15:08:21如果一行内容中有图片有文字的话,文字往往会自动的底部对齐,影响美观,那如何让它们相对于垂直居中呢,很简单,就是在图片和文字所在的行中添加CSS属性:vertical-align:middle; 三、解决内嵌 -
CSS推荐文章第一辑
2009-06-15 15:15:00去掉带超级链接图片的蓝色边框 css 实现层在浏览器垂直居中 让网站变成黑白的CSS代码,为四川汶川大地震遇难同胞深切哀悼 如何在网站中加入百度搜索功能? display与visibility的区别 实现div中的内容垂直居中的几种... -
delphi 开发经验技巧宝典源码
2010-08-12 16:47:230208 在DataGrid中如何使标题文字居中 138 0209 如何把ListBox中的内容拖曳到另一个ListBox中 139 0210 把DBGrid中的数据赋给数组 139 0211 如何获取DataGrid单元格中的内容 140 0212 如何锁定文本框中的... -
零基础学HTML CSS源代码
2010-05-10 07:57:26移动实例手把手—让图片像电影动起来.html 演示让图片像电影动起来。 第11章(源代码\第11章) 示例描述:本章演示网页多媒体标记的用法。 多媒体基本语法.html 多媒体基本语法。 多媒体循环播放.html ... -
css入门笔记
2018-05-15 14:58:57独立于任何网页位置处,声明一个样式文件(.css为后缀),在文件中声明样式,在使用的网页中引入.css文件。 使用步骤: 1.创建样式表文件(.css) 2.在样式文件中编写样式规则 3.在网页中对样式文件进行引入 <... -
react-native 之布局篇
2021-01-10 04:06:31<p>css 里边经常会做的事情是去讲一个文本或者图片水平垂直居中,如果使用过css 的flexbox当然知道使用<code>alignItems</code> 和 <code>justifyContent</code> . 那用react-native也来做一下实验 <pre>...
收藏数
29
精华内容
11
-
【硬核】一线Python程序员实战经验分享(1)
-
牛牛量化策略交易
-
PowerBI重要外部工具详解
-
解决:Idea创建子模块后无法引入父模块的依赖
-
MySQL 事务和锁
-
linux c i2c总线 通信 源代码
-
MySQL 管理利器 mysql-utilities
-
es和solr比较 选型
-
数据库面试题【十三、大表数据查询,怎么优化】
-
【Python-随到随学】FLask第二周
-
全球编程大赛作品,拍摄月亮 3.98K.rar
-
使用 Linux 平台充当 Router 路由器
-
IDEA远程调试SpringBoot项目.pdf
-
记录一次小程序海报的升级优化过程
-
express使用JWT和httpOnly cookie进行安全验证
-
py课程设计.zip
-
作业
-
编程开始了
-
Amoeba 实现 MySQL 高可用、负载均衡和读写分离
-
PKI&ID.pptx