Question

我需要在垂直和水平方向上将图像置于另一个图像的顶部。具体来说，我试图在缩略图上定位预加载器gif。

我正在使用 IE 解决方案， IE 兼容，没有硬编码的固定值。

body {
    background-color:#180e0b;
	font-family:DejaVu Sans Mono ;
	font-size: 13px;
	color: white;
}

.text {
    float:left;
    padding-right: 6px;
}

.thumb {
	position: absolute;
}

.loading {
	position: relative;
}

<div class="container">
    <div class="text">Doomero</div>
    <div class="image">
		<img class="thumb" src="http://www.principiaprogrammatica.com/thumb.png"/>
		<img class="loading" src="http://www.principiaprogrammatica.com/rolling.gif"/>
	</div>	
</div>

Answer 1

你几乎是对的。这是改变的CSS代码：

.image {
  position: relative;
  display: inline-block;
  vertical-align: top;
}

.thumb {
  display: block;
}

.loading {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -8px;
  margin-top: -8px;
}

工作代码段

＆＃13;

body {
  background-color:#180e0b;
  font-family:DejaVu Sans Mono ;
  font-size: 13px;
  color: white;
}

.text {
  float:left;
  padding-right: 6px;
}

.image {
  position: relative;
  display: inline-block;
  vertical-align: top;
}

.thumb {
  display: block;
}

.loading {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -8px;
  margin-top: -8px;
}

＆＃13;

<div class="container">
  <div class="text">Doomero</div>
  <div class="image">
    <img class="thumb" src="http://www.principiaprogrammatica.com/thumb.png"/>
    <img class="loading" src="http://www.principiaprogrammatica.com/rolling.gif"/>
  </div>	
</div>

＆＃13;

Answer 2

知道您不想使用固定大小并假设缩略图图像将大于加载图像，您可以尝试以下css3。这适用于大多数现代浏览器IE9 +。

.image {
    position:relative;
}
.thumb {
    display: block;
}
.loading {
    position:absolute;
    top:50%;
    left:50%;
    -moz-transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50px) translateY(-50%);
    -o-transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50px);
    transform: translateX(-50%) translateY(-50%);
}

中心图像在另一个图像上

2 个答案: