Question

我需要创建一个可点击的div，其中包含div中水平和垂直居中的图像（可变大小，但小于div）。

我用

点击了div

    #image-box a { display: block; height: 100%; width: 100%; }

但似乎无法垂直居中。

Answer 1

尝试调整元素的宽度和高度，如注释中所述：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Centered Clickable Image</title>
    <style type="text/css" media="screen">
    #image-box {
            position:absolute; 
            top:0; bottom:0; left:0; right:0;
            margin:auto; 
            border: 1px solid #999;
            text-align: center;
            }

    #image-box a {display:block; position:absolute; 
            top:0; bottom:0; left:0; right:0;
            margin:auto; text-align: center;
            }

    /* insert the same width and height of your-nice-img.png */
    #image-box a {width:339px; height:472px; border: 2px solid red;}
</style>
</head>
<body>    
    <div id="image-box">
        <a href="#">
            <img src="your-nice-image.png" alt="image to center"/>
        </a>
    </div>
</body>
</html>

备注：只有可视化调试才需要边框，您可以随时删除它们。

这里的技巧是你使用具有固定宽度和高度的绝对定位div（#image-box）。

如果您将#image-box a顶部和底部位置设置为零，则规则margin:auto会将#image-box a元素置于中间位置（垂直轴上），因为它有一个固定的高度，。

如果你可以或者喜欢用jQuery解决它，试试这个：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Centered Image</title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> </head> <body> <div id="image-box"> <a href="#"> <img src="canning.png" alt="image to center"/> </a> </div> <script type="text/javascript" charset="utf-8"> $(document).ready(function(){ $(window).resize(function(){ $('#image-box a').css({ position:'absolute', left: ($(window).width() - $('#image-box a img').outerWidth())/2, top: ($(window).height() - $('#image-box a img').outerHeight())/2 }); }); // first run $(window).resize(); }); </script> </body> </html>

可点击的div，图像垂直和水平居中

1 个答案: