设置图片垂直居中line-height和vertical-align的区别

设置图片水平居中line-height和vertical-align的区别

先看一个案例：目的是使图片相对于模块垂直居中

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {margin: 0;padding: 0;}div {background-color: rgb(194, 78, 240);overflow: hidden;}div ul {list-style: none;}div ul li {float: left;height: 45px;line-height: 45px;}div ul li:nth-child(1) {width: 8%;}div ul li:nth-child(1) img {width: 10px;}div ul li:nth-child(2) {width: 10%;}div ul li:nth-child(2) img {width: 30px;}</style>
</head><body><div><ul><li><img src="data:images/close.png" alt=""></li><li><img src="data:images/logo.png" alt=""></li><li>33</li></ul></div>
</body></html>

案例效果：

案例分析：

虽然代码中设置了了line-height的值为父元素的高，但是可以看到第一个图标是垂直居中了的，第二个图标是没有垂直居中的，这又是为什么呢？

因为在line-height属性中图片默认是和文字的基线对齐的

那对于图片默认和文字的基线对齐的情况，如果我们想自定义垂直方向上的对齐方式改怎样呢？

在CSS中有个属性vertical-align是设置垂直方向上的对齐方式的，我们只需要在同一行的任一个选择器，或者父亲节点的样式上设置改属性就行。

vertical-align属性值：

下面我们将图片设置为vertical-align:middle再来看看效果（设置图片垂直居中）

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {margin: 0;padding: 0;}div {background-color: rgb(194, 78, 240);overflow: hidden;}div ul {list-style: none;}div ul li {float: left;height: 45px;line-height: 45px;}div ul li:nth-child(1) {width: 8%;}div ul li:nth-child(1) img {width: 10px;}div ul li:nth-child(2) {width: 10%;}div ul li:nth-child(2) img {vertical-align: middle;width: 30px;}</style>
</head><body><div><ul><li><img src="data:images/close.png" alt=""></li><li><img src="data:images/logo.png" alt=""></li><li>33</li></ul></div>
</body></html>

总结：

当设置了line-height属性发现图片没有垂直居中，这时候因该还要设置vertical-align属性，单独设置vertical-align属性是不能使图片垂直居中的，vertical-align要和line-height属性一起使用。

设置图片垂直居中line-height和vertical-align的区别相关推荐

图片垂直居中的CSS技巧
今天遇到的问题:使用纯CSS实现未知尺寸的图片在275px的正方形容器中(高宽都小于275px)水平和垂直居中. 主要在于:图片未知大小,而且要求垂直居中. 下面是找的一个权衡的相对结构干净,CSS简 ...
div图片垂直居中如何使div中图片垂直居中
div相对与table对于图片的垂直居中支持的并不好,特别对于不同浏览器的兼容性来说,这里我们看下一个简洁的css解决方法: 在曾经的淘宝UED 招聘中有这样一道题目: "使用纯CSS ...
【收藏】图片垂直居中的解决办法
源地址:http://www.planabc.net/2008/05/26/img_vertical_center_solution/ 在曾经的淘宝UED 招聘中有这样一道题目: "使用 ...
Div图片垂直居中的方法
<style> .box { /*非IE的主流浏览器识别的垂直居中的方法*/ display: table-cell; vertical-a ...
html中怎么在li中加图片,如何让li里的图片垂直居中
如何让li里的图片垂直居中? 111111 222222 别用display:table之类的啊,那样一个li占了一个大的单元格那么大的地方,无法和图片li紧贴在一起了. 回复讨论(解决方案) .bo ...
设置图片元素上下垂直居中的7种css样式_赵一鸣博客
设置图片元素上下垂直居中的7种css样式阅读(9548) @2018-07-15 14:13:34 图片.文字左右居中很简单,只需要以下代码: 1 text-align:center; 文字上下居中 ...
css垂直居中怎么设置?文字上下居中和图片垂直居中
css 居中分css垂直居中和css水平居中,水平居中平时比较常用,这里我们主要讲css上下居中的问题.垂直居中又分为css文字上下居中和css图片垂直居中,下面我们就分别来介绍一下. css文字上下 ...
设置图片和文字的垂直居中
设置图片和文字的垂直居中.vertical-align:middle;图片竖向居中,然后文字就可以和图片对齐.
设置uitabBar中某个item只显示图片不显示文字，并且图片垂直居中
ios 开发中,如何设置 uitabbar 里面 tabbaritem 不显示文字,只显示图片,图片垂直居中? -(void)creatTabbar{DisCoverViewController *w ...

设置图片垂直居中line-height和vertical-align的区别

设置图片垂直居中line-height和vertical-align的区别相关推荐

最新文章

热门文章