Question

好的，现在我正在建立一个网站。事情是，我有部分悬停元素。现在，当我将鼠标悬停在它上面时，我想要出现这两个图标，我完全有能力这样做。但问题是，我有两个图标，我希望它们居中。但是我很难将它们集中在一起。这就是我的代码顺便说一下的样子。我希望他们都在中间居中，但不重叠。谢谢！

          <p>
        <div class="golf">
          <img src="http://i.imgur.com/aJi53jD.jpg" alt="Wingardium Leviosa!" align="left">
          <div class="charahover">
            <img src="https://raw.githubusercontent.com/Clarachun/framefinds.com/gh-pages/Pictures/heart.png" id="class" onclick="myFunction()">
            <img src="https://raw.githubusercontent.com/Clarachun/framefinds.com/gh-pages/Pictures/locations%20sign.png" id="class">
          </div>
        </div>
        <div class="foam">
          <span style="font-size:30px;">The Rainbow Crosswalk</span><br>
          Be prideful at this brightly colored crosswalk in West Hollywood!<br><br><br>
          Santa Monica Boulevard (at San Vicente Boulevard)<br>
          West Hollywood, CA 90069<br>
          United States<br><br><br>
          <a href="">
            <span style="font-size: 20px;">Click here for Map!</span>
          </a>
        </div>
      </p>

这是我的css

    .foam {
  width: 40%;
  margin-left: auto;
  padding-left: 30px;
  text-align: center;
}
.charahover {
    position:absolute;
    z-index:10;
    background-color:#333;
    opacity:0;
    transition:1s opacity;
    overflow:hidden;
    width: 432px;
    position:absolute;
}

.charahover:hover {
    opacity:0.9;
}

.charahover img {
  width: 33.3%;
  padding: 10px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.golf {
  width: 60%;
}

Answer 1

我已经在jsFiddle中编辑了你的代码（并删除了无关的标记/ CSS） - https://jsfiddle.net/Shuaso/9g99ugsh/

通过应用CSS属性＆＃34; display：inline-block;＆＃34;对于容器div，它的宽度设置为它的子宽度，在这种情况下，它是＆＃34;彩虹人行横道的图像宽度。＆＃34;然后，将.charahover div的宽度设置为100％使其跨越它的容器的整个宽度，该宽度与图像的宽度相同，从而使悬停的图像居中。并且你必须将定位应用于容器div，这样当你将.charahover div设置为100％时，它可以采用它的宽度，因为这只能用于定位元素。此外，您有多个同名的ID，因此我会更改它，因为它不是有效的标记。

HTML：

<div class="golf">
  <img src="http://i.imgur.com/aJi53jD.jpg" alt="Wingardium Leviosa!" align="left">
  <div class="charahover">
    <img src="https://raw.githubusercontent.com/Clarachun/framefinds.com/gh-pages/Pictures/heart.png" id="class" onclick="myFunction()">
    <img src="https://raw.githubusercontent.com/Clarachun/framefinds.com/gh-pages/Pictures/locations%20sign.png" id="class">
  </div>
</div>

CSS：

.charahover {
  position: absolute;
  z-index: 10;
  background-color: #333;
  opacity: 0;
  transition: 1s opacity;
  overflow: hidden;
  width: inherit;
}

.charahover:hover {
  opacity: 0.9;
}

.charahover img {
  width: 100%;
  padding: 10px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.golf {
  display: inline-block;
  position: relative;
}

居中和浮动图像彼此相邻

1 个答案: