div中图片的处理-居中垂直

痛定思痛。 2021-09-12 08:24 343阅读 0赞

经常会遇到img垂直居中div的问题，下面我们来整理下

一.水平居中

![20170620113531070][]

1.text-align:center

.wrap1{ text-align: center; width: 500px; background-color: #000; height: 100px; } .wrap1 img{ width: 100px; height: 50px; }

<div class="wrap1"> <img src="img-03.png"> </div>

2.margin: 0px auto;（要注意：把img变成块级元素）

.wrap1{ width: 500px; background-color: #000; height: 100px; } .wrap1 img{ width: 100px; height: 50px; margin: 0px auto; display: block; }

注意：a.这个图片的宽度有时候是不一定要设置，前提是浏览器自己能获取到图片的宽，否则需要我们自行定义个宽。

b.局部可以覆盖全局，局部写margin是会生效，不受body上的margin影响的。让一个区块居中显示：margin:0 auto;是对的，但ie6-8来看，依然是没用的，要另外写一句：text-align:center;

![20170620134634505][]

3.列表中使用text-align: center;li\{display: inline;\}

.wrap4{width: 500px;background-color: #000;height: 180px;} .test4{text-align: center;padding: 15px;} .test4 li{display: inline;} .test4 a{padding: 2px 6px;color: #fff;border:1px solid #fff;}

<div class="wrap4"> <ul class="test4"> <li><a href="#">1</a></li> </ul> <ul class="test4"> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> </ul> <ul class="test4"> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">4</a></li> <li><a href="#">5</a></li> <li><a href="#">6</a></li> </ul> </div>

4.position: relative; left:50%;margin-left:;相对定位绝对定位来做

二.垂直

1.display: table-cell; vertical-align: middle;

.wrap{ background-color: #000; width: 500px; color: #fff; height: 100px; display: table-cell;/*ie7和ie6都不能识别 display: table-cell;*/ vertical-align: middle;/*ie7和ie6能识别vertical-align:middle; */ *position: relative; } .vertical-wrap{*position: absolute; *top:50%;} .vertical{*position: relative;*top: -50%;}

<div class="wrap"> <div class="vertical-wrap"> <div class="vertical"> <p>Hello wrold</p> <p>Hello wrold</p> </div> </div> </div>

![20170620140339224][]

注意：因为display: table-cell;不兼容ie7所以才要使用

.vertical-wrap\{\*position: absolute; \*top:50%;\}  
.vertical\{\*position: relative;\*top: -50%;\}

如果在父级.wrap中加入“text-align: center;”则垂直居中。

![20170620140423513][]

a:图片也是可以

.wrap{ width: 200px; color: #fff; height: 200px; display: table-cell;/*ie7和ie6都不能识别 display: table-cell;*/ vertical-align: middle;/*ie7和ie6能识别vertical-align:middle; */ *position: relative; border:1px solid #ccc; margin-left: 20px; text-align: center; } .wrap .vertical-wrap{*position: absolute; *top:50%;} .wrap .vertical{*position: relative;*top: -50%;} .wrap img{width: 100px;height: 50px;}

<div class="wrap"> <div class="vertical-wrap"> <a class="vertical"> <img src="img-03.png"/> </a> </div> </div>

![20170620142829744][]

但是在ie7中text-align: center;并不会使其图片居中。

b:如果延伸到列表中时，ie7以下不支持。

.m10 li{ width: 200px; color: #fff; height: 200px; display: table-cell;/*ie7和ie6都不能识别 display: table-cell;*/ vertical-align: middle;/*ie7和ie6能识别vertical-align:middle; */ *position: relative; text-align: center; border:1px solid #ccc; margin-left: 20px; } .m10 li .vertical-wrap{*position: absolute; *top:50%;} .m10 li .vertical{*position: relative;*top: -50%;} .m10 li img{width: 100px;height: 50px;}

<ul class="m10"> <li> <div class="vertical-wrap"> <a class="vertical"> <img src="img-03.png"/> </a> </div> </li> <li> <div class="vertical-wrap"> <a class="vertical"> <img src="img-03.png"/> </a> </div> </li> <li> <div class="vertical-wrap"> <a class="vertical"> <img src="img-03.png"/> </a> </div> </li> </ul>

![20170620142056709][]

三.垂直居中

1.原理： 利用vertical-align实现垂直，决定行高的是行内最高的元素的值。

.m10 li{ float: left; width: 200px; height: 200px; text-align: center; border:1px solid #ccc; } .m10 li span{height: 100%;display: inline-block;vertical-align: middle;} .m10 li img{width: 100px;height: 50px;vertical-align: middle;}

<ul class="m10"> <li> <span></span> <img src="img-03.png"/> </li> <li> <span></span> <img src="img-03.png"/> </li> <li> <span></span> <img src="img-03.png"/> </li> </ul>

![20170620143407278][]

ie7都是可以兼容的

很多方法都是依赖于将外部容器的显示模式设置成table才能实现垂直居中，也就是div来模拟table。

# [未知高度的图片在div设置垂直居中][div] #

[20170620113531070]: /images/20210813/ddac4cabe6414d53b0db2ca42d5712a0.png
[20170620134634505]: /images/20210813/09283c8ee2c046838159524b27b0bd07.png
[20170620140339224]: /images/20210813/8f6e97c111644b1cb1503f5db66ff7d0.png
[20170620140423513]: /images/20210813/c219741f30954b17a67ab426e6c5a5c6.png
[20170620142829744]: /images/20210813/935856801ee74008a35146a38c057d89.png
[20170620142056709]: /images/20210813/499d08eea1dc4d50bf315091fc9fea52.png
[20170620143407278]: /images/20210813/79846046ea5745b380af1ac8effe1ea4.png
[div]: http://www.cnblogs.com/leejersey/p/3780415.html

发表评论取消回复

表情：

评论列表（有 0 条评论，343人围观）

还没有评论，来说两句吧...

相关阅读

相关 div 水平垂直居中

<div class="parent"> <div class="child"></div> </div> 1、 div.pare

小鱼儿/ 2023年10月12日 08:11/ 0 赞/ 25 阅读

相关 DIVs水平垂直居中

.login-container { height: 260px; margin: 0 auto; /水平居中/ margin-top:

迈不过友情╰/ 2023年07月07日 03:37/ 0 赞/ 18 阅读

相关 div水平垂直居中

一、水平居中： 1、div盒子水平居中：比较容易，直接设置div元素的margin: 0 auto就可以实现。 2、div里面的内容水平居中：text-align:cent

朴灿烈づ我的快乐病毒、/ 2022年12月07日 01:14/ 0 赞/ 295 阅读

相关子div水平垂直居中及 div中label水平垂直居中

<html lang="en"> <head> <meta charset="UTF-8"> <meta http-e

客官°小女子只卖身不卖艺/ 2022年11月06日 15:54/ 0 赞/ 257 阅读

相关 div水平垂直居中

.main\{width:960px;height:658px;position:absolute;top:50%;left:50%;margin-top:-329px;mar

向右看齐/ 2022年08月23日 12:47/ 0 赞/ 315 阅读

相关如何使div中图片垂直居中

关于图片垂直居中的话题想必大家在论坛或者是百度搜索列表中看到了不少了吧，烦人的是没有具体或者相当详细的解决方法，希望本文所整理的知识点可以帮助到你 div相对与table对于

Love The Way You Lie/ 2022年07月16日 11:47/ 0 赞/ 235 阅读

相关图片在div中垂直方向居中，垂直居中

原理：利用vertical-align实现垂直，决定行高的是行内最高的元素的值。 css 属性： div \{ height:600px; width:600px

港控/mmm°/ 2022年07月16日 01:46/ 0 赞/ 240 阅读

相关 css垂直居中--div

面试到css的时候，人们经常会问给你一个div固定宽度. <!DOCTYPE html> <html lang="en"> <head> <

「爱情、让人受尽委屈。」/ 2022年07月15日 23:18/ 0 赞/ 310 阅读

相关 CSS——div垂直居中及div内文字垂直居中

　　最近做demo时，经常需要div垂直居中或者让div内文字相对div垂直居中。水平居中比较简单，就不多说了，这里主要记录一下垂直居中的一些方法。一、div垂直居中的一些

旧城等待，/ 2021年12月21日 11:29/ 0 赞/ 491 阅读

相关 div中图片的处理-居中垂直

经常会遇到img垂直居中div的问题，下面我们来整理下一.水平居中 ![20170620113531070][] 1.text-align:center

痛定思痛。/ 2021年09月12日 08:24/ 0 赞/ 344 阅读