Css标题中图片居中,图片居中：任意图片在div里的上下垂直都居中！

任意一个图片，在div中都居中显示，这是比较常用的CSS，很多刚学习的新手却并不知道！

div{ border:1px solid #ccc;

height:500px; width:500px; line-height: 500px;

text-align:center;

background:#ccc;}

img{ vertical-align:middle;max-width: 100%;max-height: 100%; }

或者:

div{ border:1px solid #ccc;

height:500px; width:500px;

text-align:center;

background:#ccc;}

img{ vertical-align:middle;max-width: 100%;max-height: 100%; }

div span{ height:100%; width:0; overflow:hidden; display:inline-block; vertical-align:middle; }

第一段CSS和第二段有什么不同呢？第一段CSS使用了line-height: 500px;，第二段没有line-height，CSS和HTML却都多了span，都实现一样的效果！

可能会有疑问，比如图片后面加入span干什么呢？难道是标题的用途？NO！

span是为img撑开空间用的，img比较特殊，不会撑起上下空间，图片本身的尺寸只能限制图片，上下居中，必须有span为它撑开一定垂直空间，它在一定空间中才可以！

第一段中没有使用span，一样垂直居中了，又是如何办到的？因为div的CSS使用了line-height: 500px;，就已经用行高撑起了空间，所以无需span！两种方法都可以，但具体到实际代码中可以挑选其中一种！

Css标题中图片居中,图片居中：任意图片在div里的上下垂直都居中！相关推荐

CSS布局：设置图片在DIV中上下左右居中(水平和垂直都居中)
CSS布局实例,这个例子相信很实用,让一个图片在Div容器中上下.左右都居中,也就是水平和垂直都居中,有用吧,平时遇到的机率挺高的,下面结合CSS和HTML来实现这个演示,请参见代码: <sty ...
html p内容居中,html中如何让DIV标签中的P标签水平和垂直都居中？
html中如何让DIV标签中的P标签水平和垂直都居中? 让DIV标签中的P标签水平和垂直都居中 div { width:400px; height:300px; border:1px solid #6 ...
html语言调用图片,css文件中怎么引用图片？
CSS样式表可以单独存放在一个CSS文件中,这样我们就可以在多个页面中使用同一个CSS样式表.那么如何在css文件中引入图片呢?下面我们来看一下css引入图片的方法. css中background-i ...
html图片下方会有一像素,div里嵌套了img底部会有白块问题和图片一像素问题解决 - Macchiato...
div里嵌套了img底部会有白块因为img默认是按基线(baseline)对齐的.对比一下图片和右边的p, q, y等字母,你会发现这三个字母的"小尾巴"和图片下方的空白一样高. ...
Css标题中图片居中,CSS居中的标题图片
我有一个标题图片在屏幕上重复出现,因此无论屏幕分辨率如何,标题始终都会伸展100%,我已将图片放在包装div中. 在DIV的顶部,我也希望放置'logo',使它始终居中在屏幕的顶部.CSS居中的标题图 ...
CSS样式中,background-image 背景图片居中显示并且在不同屏幕分辨率下始终居中
body { margin-top:0px; margin-right:0px; margin-bottom:0px; margin-left:0px; background-colo ...
CSS学习中|关于背景图片background
1.背景颜色(background-color) 语法: background-color:颜色值: 默认值是透明的 transparent 代码: <!DOCTYPE html> < ...
CSS样式中解决背景图片不能完美填充页面(页面高度很高)
先上个图这里我的图片是1920x1080像素的但页面高度有2000像素左右,想要图片可以完美填充页面背景只需写入以下代码 body {margin: 0;padding: 0;backgroun ...
js正则:提取css语法中的背景图片名字
------测试代码--------- var re = /background(?:\-image)? *\:[^\:;\}]*url *\([ "']*(?:.*\/)?([^\/]+\ ...

Css标题中图片居中,图片居中：任意图片在div里的上下垂直都居中！

Css标题中图片居中,图片居中：任意图片在div里的上下垂直都居中！相关推荐

最新文章

热门文章