Question

我正在尝试将两个图像放在彼此的顶部，两个图像在其容器内水平和垂直居中。

其中一个图像的不透明度会动画显示下面的图像。

图像尺寸相同，但我事先并不知道图像的大小。我也想用纯CSS和HTML来做这件事。

这是我最终的结果。

.data-box{
  border: 2px solid #d4d4d4;
  border-radius: 3px;
  display: flex;
  height: 120px;
  margin: 5px;
  margin-bottom: 10px;
  margin-right: 10px;
  padding: 0;
  position: relative;
  width: 120px;
}

.logo {
  align-items: center;
  display: flex;
  justify-content: center;
  margin: auto;
  position: relative;
}

.data-name {
  position: absolute;
  width: 100%;
  height: 23px;
  bottom: 0px;
  right: 0px;
  background: rgba(200, 200, 200, 0.3);
}

span {
  position: absolute;
  width: 100%;
  bottom: 2px;
  text-align: center;
}

img {
  position: absolute;
}

<div class="data-box">
  <div class="logo">
    <img class="grayscale-image" src="https://placeholdit.imgix.net/~text?txtsize=8&txt=65%C3%9765&w=65&h=65" alt="">
    <img class="color-image" src="https://placeholdit.imgix.net/~text?txtsize=8&txt=65%C3%9765&w=65&h=65" alt="">
  </div>
  <div class="data-name"><span>Flickr</span></div>
</div>

我制作了图片position: absolute，这样他们就会离开浏览器的正常流程并直接渲染到彼此之上而不是彼此相邻。

这在Chrome中正常运行，但在Firefox和Safari中，图片的左上角水平和垂直居中：

如何让这些图像水平和垂直居中，同时让它们直接在彼此的顶部渲染？

Answer 1

解决方案

将此添加到您的代码中：

img {
  position: absolute;
  top: 0;
  left: 0;
  transform: translate(-50%, -50%);
}

＆＃13;

.data-box {
  border: 2px solid #d4d4d4;
  border-radius: 3px;
  display: flex;
  height: 120px;
  margin: 5px;
  margin-bottom: 10px;
  margin-right: 10px;
  padding: 0;
  position: relative;
  width: 120px;
}
.logo {
  align-items: center;
  display: flex;
  justify-content: center;
  margin: auto;
  position: relative;
}
.data-name {
  position: absolute;
  width: 100%;
  height: 23px;
  bottom: 0px;
  right: 0px;
  background: rgba(200, 200, 200, 0.3);
}
span {
  position: absolute;
  width: 100%;
  bottom: 2px;
  text-align: center;
}
img {
  position: absolute;
  top: 0;
  left: 0;
  transform: translate(-50%, -50%);
}

＆＃13;

<div class="data-box">
  <div class="logo">
    <img class="grayscale-image" src="https://placeholdit.imgix.net/~text?txtsize=8&txt=65%C3%9765&w=65&h=65" alt="">
    <img class="color-image" src="https://placeholdit.imgix.net/~text?txtsize=8&txt=65%C3%9765&w=65&h=65" alt="">
  </div>
  <div class="data-name"><span>Flickr</span>
  </div>
</div>

＆＃13;

说明

虽然将元素设置为position: absolute会将其从正常流程中移除，但实际上并未将其放置在任何位置。

CSS偏移属性（top，bottom，left和right）的初始值为auto，它保留了一个绝对定位的元素它通常是在文件流程中。如您所见，当定义偏移时，浏览器行为会有所不同。

有关上述代码的工作原理的说明，请参阅此帖子：Element will not stay centered, especially when re-sizing screen

Answer 2

我认为你根本不需要flexbox：

<div class="data-box">
  <div class="logo">
    <img class="grayscale-image" src="https://placeholdit.imgix.net/~text?txtsize=8&txt=65%C3%9765&w=65&h=65" alt="">
    <img class="color-image" src="https://placeholdit.imgix.net/~text?txtsize=8&txt=65%C3%9765&w=65&h=65" alt="">
  </div>
  <div class="data-name"><span>Flickr</span></div>
</div>

getSingleChartObsinterval(id: number, interval: number) : Observable<Graph> {

return Observable.interval(interval).flatMap(() => this.getSingleChartobs(id));        
}


getSingleChartobs(id: number) : Observable<Graph> {

    return this.jsonp.get(“api location”)
            .map(response => this.extractJsonData(response, id) as Graph)
}

Answer 3

你可以在div中设置img，并将后面的图像设置为div的背景吗？

Answer 4

这不是最优雅的解决方案，但这有效：

img {
  position: absolute;
  transform: translate(-50%, -50%);
}

Answer 5

我会尽力直截了当。这是一个将两个图像集中在父级内部的示例。

<html>
<head>
<title>Exemple</title>

<style type="text/css">
	.parent{
		margin: auto auto;
		width: 500px;
		height: 500px;
		border: 3px solid #ccc;
	}

	.child1, .child2{
		width: 50%;
		height: 50%;
		margin: 25%;
		background-color: rgb(226,26,60);
	}

   .child1{
       opacity:0.5;
   }
</style>

</head>

<body>
<div class="parent">
<img class="child1" src="https://placeholdit.imgix.net/~text?txtsize=8&txt=65%C3%9765&w=65&h=65" alt="">
<img class="child2" src="https://placeholdit.imgix.net/~text?txtsize=8&txt=65%C3%9765&w=65&h=65" alt="">
</div>
</body>


</html>

使用百分比边距将两个图像对齐父母div。在这里，我将with和height设置为50％，这意味着有剩下50％。这就是为什么你把利润率设置为25％，所以他把它放在了中间的父母。

祝你好运

如何将两个图像水平和垂直居中在一起？

5 个答案:

解决方案

说明