CSS悬停不居中

Question

我正在创建一个div，它将包含一个用户名，当它们悬停在一个配置文件图像上时，它将在图像上显示名称，当我这样做时，它不会将div放在图像中心，这将导致一个问题在设计网站时。

我的CSS如下：

.miniProfileImage {
    border-radius: 100%;
    border: 3px dashed #28A745;
    width: 100%;
    max-width: 200px;
    height: auto;
    transition: .5s ease;
    backface-visibility: hidden;
    opacity: 1;
    display: block;
}

.middle {
    transition: .5s ease;
    opacity: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    text-align: center;    
}

.img-container {
    position: relative;
    width: 50%;
}

.img-container:hover .miniProfileImage {
    opacity: 0.3;
}

.img-container:hover .middle {
    opacity: 1;
}

.middleText {
  background-color: #4CAF50;
  color: white;
  font-size: 16px;
  padding: 16px 32px;
}

可以在此处看到HTML标记示例：

<div class='img-container'>               
  <img class='miniProfileImage' src='http://via.placeholder.com/500x500'>
  <div class='middle'>
    <p class='middleText'>Some Name</p>
  </div>
</div> 

我还创建了一个JS小提琴来代表正在发生的事情

.miniProfileImage {
    border-radius: 100%;
    border: 3px dashed #28A745;
    width: 100%;
    max-width: 200px;
    height: auto;
    transition: .5s ease;
    backface-visibility: hidden;
    opacity: 1;
    display: block;
}

.middle {
    transition: .5s ease;
    opacity: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    text-align: center;    
}

.img-container {
    position: relative;
    width: 50%;
}

.img-container:hover .miniProfileImage {
    opacity: 0.3;
}

.img-container:hover .middle {
    opacity: 1;
}

.middleText {
  background-color: #4CAF50;
  color: white;
  font-size: 16px;
  padding: 16px 32px;
}

<div class='img-container'>               
  <img class='miniProfileImage' src='http://via.placeholder.com/500x500'>
  <div class='middle'>
    <p class='middleText'>Some Name</p>
  </div>
</div> 

谢谢

Answer 1

那是因为你周围的<div class='img-container'>的宽度比图像宽。

如果您希望div与图像具有相同的大小，则可以执行以下操作：

.img-container {
  position: relative;
  display: inline-block;
}

.miniProfileImage {
    border-radius: 100%;
    border: 3px dashed #28A745;
    width: 100%;
    max-width: 200px;
    height: auto;
    transition: .5s ease;
    backface-visibility: hidden;
    opacity: 1;
    display: block;
}

.middle {
    transition: .5s ease;
    opacity: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    text-align: center;    
}

.img-container {
    position: relative;
    display: inline-block;
}

.img-container:hover .miniProfileImage {
    opacity: 0.3;
}

.img-container:hover .middle {
    opacity: 1;
}

.middleText {
  background-color: #4CAF50;
  color: white;
  font-size: 16px;
  padding: 16px 32px;
}

<div class='img-container'>               
  <img class='miniProfileImage' src='http://via.placeholder.com/500x500'>
  <div class='middle'>
    <p class='middleText'>Some Name</p>
  </div>
</div> 

Answer 2

请像这样更正CSS

.img-container {
        position: relative;
        width: 100%;
        max-width: 210px;
    }

和.middle {white-space:nowrap}你可以给.miniProfileImage {max-width:100%}成像