中心IMG在另一张图片不动，

我有这样的代码中心IMG在另一张图片不动，

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

我希望把第二图像上的第一个。但是，当我调整屏幕的大小时，第一个图像会移动到。我希望它是固定的，而不是移动。

感谢您的回复！

来源

2015-10-15 Corentin Branquet

这应该工作，如果你把一个静态宽度.logo它将保持在它上面的img。否则，即使.logo更改宽度，它也会将其居中。

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

来源

2015-10-15 12:22:47 Thaillie

我想它的jsfiddle，当我调整移动尺寸它移动 –

@CorentinBranquet，它如何移动？有了这个代码，它保持在容器div中（甚至在调整大小）。 – Thaillie

自己看看它是如何工作的，当你调整结果部分jsfiddle.net/guksqd5p/1 –

让我知道。您可能需要将它添加到这两个类中，并使用z-index将它们堆叠在一起。

.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; 
}

来源

2015-10-15 12:23:01 plushyObject

你应该使用这样 -

更新 -

，你需要添加 -

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>

来源

2015-10-15 12:23:45

亲眼看看它是如何工作的jsfiddle.net/guksqd5p/1 –

你是否提供了代码检查 - http://jsfiddle.net/guksqd5p/3/ –

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

来源

2015-10-15 12:25:57 user2505019

自己看看它是如何工作的https://jsfiddle.net/guksqd5p/1/ –

因为你想从正确的40％。如果你允许有相同的空间或像素，我可以修复它 – user2505019

中心IMG在另一张图片不动，

回答

相关问题