CODEWITHSUNDEEP
htmlimage
Aleksandr
Aleksandr

Reputation: 787

How to center two images

I need to put image of play-button on center of big picture like this https://drive.google.com/file/d/0B-humNPiH1w8Mnp6dWhjcG1kR0E/edit?usp=sharing

Now I got this:

<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">

Can somebody help to newby?

Upvotes: 1

Views: 53

Answers (2)

sanjeev
sanjeev

Reputation: 4621

The simplest way would be set the larger image as the background image of a div & then adjust the play button in the center as shown below.

Adjust height & width as per as image

    <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>

Upvotes: 1

Vijayakumar Selvaraj
Vijayakumar Selvaraj

Reputation: 523

Here is the code,

<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 class,

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

DEMO

Upvotes: 1

Related Questions