如何保证在IE和火狐等主流浏览器让图片在块级元素中左右，上下居中显示

朴灿烈づ我的快乐病毒、 2022-08-18 02:16 93阅读 0赞

<html xmlns="http://www.w3.org/1999/xhtml">  
<head>  
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />  
    <title>方法3 - 未知高度的图片垂直居中 - www.cleanthem.com</title>  
  
<style type="text/css">  
body \{  
    height:100%; margin:0; padding:0;  
\}  
\#box\{  
    width:500px;height:400px;  
    text-align:center;  
    border:1px solid \#d3d3d3;background:\#fff;  
\}  
\#box p\{  
    width:500px;height:400px;  
    line-height:400px;  /\* 行高等于高度 \*/  
\}  
  
/\* 兼容标准浏览器 \*/  
\#box p:before\{  
    content:".";  /\* 具体的值与垂直居中无关，尽可能的节省字符 \*/  
    margin-left:-5px; font-size:10px;  /\* 修复居中的小BUG \*/  
    visibility:hidden;  /\*设置成隐藏元素\*/  
\}  
  
\#box p img\{  
    \*margin-top:expression((400 - this.height )/2);  /\* CSS表达式用来兼容IE6/IE7 \*/  
    vertical-align:middle;  
    border:1px solid \#ccc;  
\}  
</style>  
  
</head>  
  
<body>  
<div id="box">  
    <p><img src="right\_logo.jpg" alt="" /></p>  
</div>  
  
</body>

</html>

此代码经过本人测试，在主流浏览器里都有效、

发表评论取消回复

表情：

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

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

相关阅读

相关 html DI在DIV中上下左右居中

要在HTML中实现上下左右居中，可以使用CSS的Flexbox布局或Grid布局。下面是两种方法的示例代码：使用Flexbox布局：使用Grid布局：这两种方法都将

偏执的太偏执、/ 2024年02月21日 12:02/ 0 赞/ 64 阅读

相关 css实现图片上下左右居中

一种常用的方式是把外层的 div 设置为 table-cell；然后让内部的元素上下左右居中。 CSS 代码如下： .content { widt

向右看齐/ 2023年07月19日 08:10/ 0 赞/ 3 阅读

相关 PC端页面布局 - 元素在父元素里上下左右居中

较系统的学习前端PC端布局两周了，一直遇到子元素在父元素里面水平、垂直居中的问题。现在来整理一下。水平居中总结了几个方法。 1、margin:0 auto;

以你之姓@/ 2023年06月24日 10:26/ 0 赞/ 10 阅读

相关【css】absolute定位让图片在div中上下左右居中

html <div> <img src="../assets/images/404.gif" alt=""> </div> css

川长思鸟来/ 2022年11月18日 05:53/ 0 赞/ 167 阅读

相关如何保证在IE和火狐等主流浏览器让图片在块级元素中左右，上下居中显示

<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Typ

朴灿烈づ我的快乐病毒、/ 2022年08月18日 02:16/ 0 赞/ 94 阅读

相关块级元素在块级别元素中居中

引言: 通常情况下块级元素重置居中有两种方式 1.利用margin值 2.利用定位和负边距但是一次我遇到这种情况(子块级元素高度是自适应的，高度值不确定)，以上方法就不

雨点打透心脏的1/2处/ 2022年07月17日 04:19/ 0 赞/ 178 阅读

相关块级子元素在父元素中实现水平垂直居中

源代码： <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8">

深藏阁楼爱情的钟/ 2022年06月05日 22:26/ 0 赞/ 249 阅读

相关 HTML - 内联元素居中和块级元素居中

text-align：'center' 这是针对内联元素的，而margin：0 auto 则是针对块级元素的居中方式。而且它们的使用对象不一样。我们看一下如下代码：

￡神魔★判官ぃ/ 2022年05月17日 01:04/ 0 赞/ 265 阅读

相关 css 让一个图片在固定的尺寸中上下左右居中object-fit

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMz

水深无声/ 2021年11月18日 01:36/ 0 赞/ 345 阅读

相关向上下左右不间断无缝滚动图片的效果(兼容火狐和IE)

向上下左右不间断无缝滚动图片的效果(兼容火狐和IE)

朱雀/ 2020年06月25日 08:58/ 0 赞/ 576 阅读