Question

我能够使用CSS将div和图像设置为居中（中心水平，居中垂直）对齐：

＆＃13;

.center {
  height: 100%
}

.center-center {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  transform: translate(-50%, -50%);
  text-align: center;
  margin: auto;
  overflow:hidden;
}

.overlay {
  position: relative;
  max-width: 100%;
  z-index: 9999999
}

.image{
  position: absolute
}

＆＃13;

<div class="center">
  <div class =" center-center ">
    <img class="image" src="http://kb4images.com/images/picture/37509081-picture.jpg" />
    <img class ="overlay " src="http://makephotogreetings.com/upload/1456330147Happy%20Birthday%20Frame%20With%20Cup%20Cake%20and%20Your%20Photo.png"></img>
  </div>
</div>

＆＃13;

现在，我的问题是，即使我设置溢出：隐藏在课堂＆＃34; center-center＆＃34;它会隐藏一些部分，但一方仍在显示。我试图为帧图像指定一个高度，但它会影响定位。有谁知道这是否可行？

我已更新了代码段和代码，以便更好地理解

Answer 1

这里有大量的HTML / css错误，例如className来自javascript，css使用class。我添加了图像占位符，我只是摆脱了大多数样式，而是使用flexbox进行定位。

然后叠加层应该具有绝对位置，此处它恰好位于第一个图像上方。

你可以更改校样的叠加定位，但是对于叠加图像，它会在中间有一个洞来显示

.center {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.overlay {
  position: absolute;
  top: 0px;
  right: 0;
  left: 0;
  bottom: 0;
  margin: auto;
  z-index: 9999999;
}

<div class="center">
  <img src="http://via.placeholder.com/350x150">
  <img class="overlay" src="http://via.placeholder.com/350x150/fff666/000000">
</div>

Answer 2

感谢您提供一个代码段，让事情变得更轻松。

因此，根据您对我之前回答的评论，我只是以更简单的方式重新创建了这个。这假设您可以访问CSS并且该卡的固定宽度为500x500。

基本上我只是制作了一个图像容器，其中包含＆＃34; overlay＆＃34;图像，然后将此容器的背景设置为另一个图像。

＆＃13;

.birthday-card {
  display: block;
  width: 500px;
  height: 500px;
  position: relative;
  background-image: url('http://kb4images.com/images/picture/37509081-picture.jpg');
  background-size: cover;
  background-position: center;
}

.birthday-card img {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
}

＆＃13;

<div class="birthday-card">
  <img src="http://makephotogreetings.com/upload/1456330147Happy%20Birthday%20Frame%20With%20Cup%20Cake%20and%20Your%20Photo.png">
</div>

＆＃13;

CSS：Center Center Alignment并让Div隐藏溢出的图像

2 个答案: