让图片垂直居中

在不同的编码模式下,文字的行高计算是不一样的,所以请记住选择与页面相对的编码

这个方法是利用display:table-cell在支持该属性的浏览器中,结合vertial-align:middle方法来实现图片垂直居中;

在不支持display:table-cell的浏览器(IE)中利用文字结合行高的方法来实现垂直居中;

display:table-cell这个属性会导致一些属性失效,比如margin,所以使用这种方式让图片垂直居中时,涉及到多图片并排时有可能需要将下面的XHTML结构复制到li结构中;


<div class="test_box">
	<img src="book.jpg" alt="" />
</div>

.test_box {display:table-cell;width:500px;height:200px;vertical-align:middle;text-align:center;
	*float:left;*font-family:simsun;*font-size:200px;*line-height:1;
	border:1px solid #000000;
}
.test_box img {vertical-align:middle;}



### HTML 图片垂直居中实现方法 以下是几种常见的HTML图片垂直居中的实现方式: #### 方法一:通过 `line-height` 和 `vertical-align` 这种方法适用于父级容器有固定高度的情况。通过设置父级容器的行高等于其自身的高度,并将子元素(即图片)的 `vertical-align` 属性设为 `middle`,从而达到垂直居中的效果。 ```html <!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> .father { width: 600px; height: 600px; background-color: pink; line-height: 600px; /* 行高等于容器高度 */ } .father img { vertical-align: middle; /* 让图片垂直居中 */ } </style> </head> <body> <div class="father"> <img src="./images/1.jpg" alt="" /> </div> </body> </html> ``` 此方法简单易懂,但在动态布局下可能不够灵活[^1]。 --- #### 方法二:使用 Flexbox 实现 Flexbox 是现代 CSS 中最强大的布局工具之一,能够轻松实现水平和垂直方向上的对齐。 ```html <!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> .father { display: flex; /* 启用弹性盒子模型 */ justify-content: center; /* 主轴上居中 (水平) */ align-items: center; /* 交叉轴上居中 (垂直) */ width: 600px; height: 600px; background-color: lightblue; } </style> </head> <body> <div class="father"> <img src="./images/1.jpg" alt="" /> </div> </body> </html> ``` 该方法兼容性强,适合响应式设计场景[^2]。 --- #### 方法三:利用绝对定位与 `transform` 对于更复杂的布局需求,可以通过绝对定位配合 `transform` 来精确控制位置。 ```html <!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> .father { position: relative; /* 父级相对定位 */ width: 600px; height: 600px; background-color: lavender; } .father img { position: absolute; /* 子级绝对定位 */ top: 50%; left: 50%; transform: translate(-50%, -50%); /* 调整到中心点 */ } </style> </head> <body> <div class="father"> <img src="./images/1.jpg" alt="" /> </div> </body> </html> ``` 这种方式尤其适合未知尺寸的图片或复杂嵌套结构下的垂直居中[^2]。 --- #### 方法四:表格单元格模拟法 虽然较少使用,但仍然有效的是将父级容器视为一个单列单行的表格单元格,并借助 `vertical-align` 完成居中操作。 ```html <!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> .father { display: table-cell; /* 将容器作为表格单元格处理 */ text-align: center; /* 水平居中 */ vertical-align: middle; /* 垂直居中 */ width: 600px; height: 600px; background-color: peachpuff; } </style> </head> <body> <div class="father"> <img src="./images/1.jpg" alt="" /> </div> </body> </html> ``` 尽管这种技术较为古老,但它依然能在某些特定情况下发挥作用[^3]。 --- ### 总结 以上四种方法各有优劣,具体选择取决于实际项目的需求以及目标浏览器的支持情况。推荐优先考虑 **Flexbox** 或者 **绝对定位 + Transform** 的方案,因为它们更加现代化且具有良好的跨平台表现。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值