设置图片垂直居中line-height和vertical-align的区别
生活随笔
收集整理的這篇文章主要介紹了
设置图片垂直居中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="images/close.png" alt=""></li><li><img src="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="images/close.png" alt=""></li><li><img src="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的区别的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Spring的AOP思想和实现AOP思想
- 下一篇： mybatis逆向工程生成的实体类和表不