一张图片在一个相应盒子中垂直居中

最新推荐文章于 2023-12-17 17:41:20 发布

weixin_30340617

最新推荐文章于 2023-12-17 17:41:20 发布

阅读量227

点赞数

CC 4.0 BY-SA版权

文章标签： xhtml

原文链接：http://www.cnblogs.com/yjhua/p/5066858.html

本文介绍了几种实现网页中图片垂直居中的方法，包括使用CSS的table-cell属性、background-position属性及表达式兼容IE等方案，并提供了示例代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一。先上一个不随相应垂直居中的，下面是一个宽度，是可以垂直居中的，，但是，不相应。

、

<!doctype html>
<html style="font-size:15px;">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no" />
<title>v</title>

<style type="text/css">
body,html{ height:100%; width:100%;}

.box{
display:table-cell; width:1em; height:1em; border:1px solid #beceeb; font-size:144px; text-align:center; vertical-align:middle;
 
}
.box img{
         vertical-align:middle; margin:0; padding:0; max-width:50%;
}

.al{ height:50%;}
</style>
</head>

<body>
<div class="box">
<img src="appLoad.png" >
</div>
<div class="al">

555
</div>

</body>
</html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>方法1 - 未知高度的图片垂直居中 - www.nowamagic.net</title>
<style type="text/css">

        * {
          margin: 0;
          padding: 0;
          font-family: "Microsoft YaHei";
          -webkit-text-size-adjust: none;
        }
        h3 {
          margin: 0;
          padding: 0;
        }
        a,
        button,
        input,
        textarea {
          -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
          -webkit-user-modify: read-write-plaintext-only;
        }
        html {
          -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
        }
        img {
          -webkit-touch-callout: none;
        }
        html,
        body {
          width: 100%;
          height: 100%;
          
        }
        
        

#box{
    width:100%;height:400px;
    display:table;
    text-align:center;
    border:1px solid #d3d3d3;
    background:#fff;
}
#box span{
    display:table-cell;
    vertical-align:middle;
}
#box img{
    border:1px solid #ccc;
}
</style>
<!--[if lte IE 7]>
<style type="text/css">?
#box{
    position:relative;
    overflow:hidden;
}
#box span{
    position:absolute;
    left:50%;top:50%;
}
#box img{
    position:relative;
    left:-50%;top:-50%;
}
</style>
<![endif]-->

</head>

<body>
<div style="position:absolute">
<div id="box">
    <span><img src="file:///D|/now-h5/jvWeb/source/static/download/images/appLoad.png" style="max-width:50%"></span>
</div>

</div>
</body>
</html>

最后我解决的办法。

用这个盒子的背景用一个属性 background-position:center，不管这个盒子高度和宽度，多少，都可以垂直居中。

第二方法。可以随相应式，的，可以

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>方法3 - 未知高度的图片垂直居中 - www.nowamagic.net</title>

<style type="text/css">
body {
    height:100%;
    width:100%;
}
#box{
    width:100%;height:400px;
    text-align:center;
    border:1px solid #d3d3d3;background:#fff;
}
#box p{
    width:100%;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;
    background-position:center
}
</style>

</head>

<body>
<div id="box">
    <p><img src="images/appLoad.png" style="max-width:50%"></p>
</div>

</body>
</html>