CODEWITHSUNDEEP
htmlcss
Corentin Branquet
Corentin Branquet

Reputation: 1576

Center img over another img without moving

I have this code

.logo {
    text-align:center;
    position: relative;
    width:100%;
}

.logo img:last-child {
    position:absolute;
    right:40%;
    border: 1px solid black;
}
<div class="logo">
    <img src="http://placehold.it/350x350">
    <img src="http://placehold.it/250x250">
</div>

I want to put the second image over the first one. But when I resize the size of the screen, the image who is over the first moves . I want it to be fixed and not moving.

Thanks for your replies !

Upvotes: 0

Views: 52

Answers (4)

Thaillie
Thaillie

Reputation: 1362

This should work, if you put a static width on .logo it will stay where it is above the img. Otherwise this will just center it even if .logo changes its width.

.logo {
    text-align:center;
    position: relative;
    width:100%;
}

.logo img:last-child {
    position:absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    border: 1px solid black;
}
<div class="logo">
    <img src="http://placehold.it/350x350">
    <img src="http://placehold.it/250x250">
</div>

Upvotes: 1

Mukul Kant
Mukul Kant

Reputation: 7122

You should use like this -

Update-

and you need to add -

img{
    max-width:100%;
}

--

img{
  max-width:100%;
}


.logo {
    text-align:center;
    position: relative;
    width:100%;
}

.logo img:last-child {
     position:absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    border: 1px solid black;
  }
<div class="logo">
    <img src="http://placehold.it/350x350">
    <img src="http://placehold.it/250x250">
</div>

Upvotes: 2

user2505019
user2505019

Reputation: 53

.logo {
    text-align:center;
    position: relative;
    width:100%;
    
}

.logo img:last-child {
    position:absolute;
    right:40%;
    top:0px;
    border: 1px solid black;
}
<div class="logo">
    <img src="http://placehold.it/350x350">
    <img src="http://placehold.it/250x250">
</div>

Upvotes: 0

plushyObject
plushyObject

Reputation: 1131

Let me know. You may have to add this to both classes and use z-index to stack them on top of each other.

.logo img:last-child {
  position:absolute;
  left:50%;
  top: 50%;
  transform: translateY(-50%) translateX(-50%);
  -webkit-transform: translateY(-50%) translateX(-50%);
  -moz-transform: translateY(-50%) translateX(-50%);
  -ms-transform: translateY(-50%) translateX(-50%);
  border: 1px solid black;
}

Upvotes: 1

Related Questions