Question

我需要将播放按钮的图像放在大图像的中心，如https://drive.google.com/file/d/0B-humNPiH1w8Mnp6dWhjcG1kR0E/edit?usp=sharing

现在我明白了：

<style type="text/css"> 
.imgA1 { position:absolute;} 
.imgB1 { position:absolute; top: 0px; left: 0px;} 
</style>

<img class=imgA1 src="http://upload.wikimedia.org/wikipedia/commons/4/42/Papua_New_Guinea_map.png">
<img class=imgB1 src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcTDPvq3uKG_PYVLgF4Mg1bqXKmpVzmAhpPdjRhK4dy1QA-PND-iMTuHLg">

有人可以帮助newby吗？

Answer 1

这是代码，

<div class="container">
    <img class=imgA1 src="http://upload.wikimedia.org/wikipedia/commons/4/42/Papua_New_Guinea_map.png" />
    <img class=imgB1 src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcTDPvq3uKG_PYVLgF4Mg1bqXKmpVzmAhpPdjRhK4dy1QA-PND-iMTuHLg" />
    </div>

CSS类，

.container { 
    position: relative; 
    width: 322px; 
    height: 346px; 
}
.imgB1 { 
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -50px;
    margin-top: -50px;
}

<强> DEMO

Answer 2

最简单的方法是将较大的图像设置为div＆amp;的背景图像。然后调整中间的播放按钮，如下所示。

调整身高＆amp;宽度按图像

    <style type="text/css"> 
        .ImgContainer {
            background-image: url("http://upload.wikimedia.org/wikipedia/commons/4/42/Papua_New_Guinea_map.png");
            display: table-cell;
            height: 322px;
            width: 346px;
            text-align: center;
            vertical-align: middle;
        }
    </style>


    <div class="ImgContainer">
          <img class="imgB1" src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcTDPvq3uKG_PYVLgF4Mg1bqXKmpVzmAhpPdjRhK4dy1QA-PND-iMTuHLg">
    </div>

如何居中两个图像

2 个答案: