9765

9765

关注
发信
关注(28)粉丝(399)

如何水平和垂直居中对方的两个图像？

本文介绍了如何水平和垂直居中对方的两个图像？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述



其中一个图像将会放在两个图像的上面，两个图像水平和垂直居中放置在容器内。有它的不透明的动画显示下面的图像。

图像是相同的大小，但我不知道图像的大小事先。

这是我最后的结果。



data-lang =truedata-console =false>

.data-box {border：2px solid＃d4d4d4; border-radius：3px;显示：flex;身高：120px; margin：5px; margin-bottom：10px; margin-right：10px;填充：0;位置：相对; width：120px;}。logo {align-items：center;显示：flex; justify-content：center;保证金：汽车; position：relative;}。data-name {position：absolute;宽度：100％;身高：23px;底部：0px; right：0px;背景：rgba（200，200，200，0.3）;} span {position：absolute;宽度：100％;底部：2px; text-align：center;} img {position：absolute;} < div class =data-box> < div class =logo> < img class =grayscale-imagesrc =https://placeholdit.imgix.net/~text?txtsize=8&txt=65%C3%9765&w=65&h=65alt = > < img class =color-imagesrc =https://placeholdit.imgix.net/~text?txtsize=8&txt=65%C3%9765&w=65&h=65alt = > < / DIV> < div class =data-name>< span> Flickr< / span>< / div>< / div>

/ div>



我把图片放在位置：绝对，这样它们就会离开浏览器的正常流程和渲染直接在彼此的顶部，而不是彼此相邻。



这在Chrome中正常工作，但在Firefox和Safari中，图像的左上角是水平和垂直居中的：



我如何水平和垂直居中图像，而仍然让他们直接呈​​现在对方之上？ 解决方案
$ b

解决方案

将此添加到您的代码中： 

  img {
 position：absolute; 
 top：0; 
剩下：0; 
转换：translate（-50％，-50％）; 
 
 
 
 $ b 
 
   .data-box {border：2px solid＃d4d4d4; border-radius：3px;显示：flex;身高：120px; margin：5px; margin-bottom：10px; margin-right：10px;填充：0;位置：相对; width：120px;}。logo {align-items：center;显示：flex; justify-content：center;保证金：汽车; position：relative;}。data-name {position：absolute;宽度：100％;身高：23px;底部：0px; right：0px;背景：rgba（200，200，200，0.3）;} span {position：absolute;宽度：100％;底部：2px; text-align：center;} img {position：absolute;顶部：0;左：0; transform：translate（-50％，-50％）;}
< div class =data-box> < div class =logo> < img class =grayscale-imagesrc =https://placeholdit.imgix.net/~text?txtsize=8&txt=65%C3%9765&w=65&h=65alt = > < img class =color-imagesrc =https://placeholdit.imgix.net/~text?txtsize=8&txt=65%C3%9765&w=65&h=65alt = > < / DIV> < div class =data-name>< span> Flickr< / span> < / div>< / div>

h2>

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

CSS偏移属性（ top ， bottom ， left 和 right ）的初始值为 auto ，它保持了一个绝对定位的元素，如果它在文档流程中通常是这样。正如你所看到的，当偏移量没有被定义时，浏览器的行为将会有所不同。



有关上述代码的工作原理的解释，请看这篇文章：


I'm trying to place two images on top of each other, with both of the images horizontally and vertically centered inside their container.

One of the images will be have its opacity animated to reveal the image underneath.

The images are both the same size, but I don't know the size of the images beforehand. I also would like to do this in just pure CSS and HTML.

Here is what I ended up with.

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

I made the images position: absolute so they would leave the normal flow of the browser and render directly on top of each other instead of next to each other.

This works correctly in Chrome, but in Firefox and Safari the image's top left corner is horizontally and vertically centered:

How can I horizontally and vertically center these images while still having them render directly on top of each other?

解决方案

Solution

Add this to your code:

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


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

Explanation

Although setting an element to position: absolute removes it from the normal flow, it doesn't actually position it anywhere.

The CSS offset properties (top, bottom, left and right) have an initial value of auto, which keeps an absolutely positioned element where it normally would be if it were in the document flow. As you can see, browser behavior will vary when the offsets aren't defined.

For an explanation of how the code above works, see this post: Element will not stay centered, especially when re-sizing screen

这篇关于如何水平和垂直居中对方的两个图像？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

08-12 16:53
Powered by LMLPHP ©2024 9765 0.040616