센터링 및 플로팅 이미지가 서로 인접합니다.

Question

좋아, 지금은 웹 사이트를 만들고 있습니다. 그리고 것은, 그것의 부분에 hover 요소가 있습니다. 내가 그 위에 마우스를 올리면이 두 아이콘이 나타나기를 바랍니다. 나는 완벽하게 할 수 있습니다. 하지만 문제는 아이콘이 두 개 있고 중심에 놓기를 원합니다. 하지만 그들을 집중시키는 데 어려움을 겪고 있습니다. 이것은 내 코드가 그런 것처럼 보입니다. 나는 그 (것)들을 중심에 둘 다 중심에두고 싶지만 중첩하지 말라. 감사!

  <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 제거) 한 - CSS의 속성 "디스플레이를 적용하여 https://jsfiddle.net/Shuaso/9g99ugsh/

를 : 인라인 블록; " 컨테이너 div에 너비가 자식의 너비로 설정됩니다.이 경우에는 "레인보우 횡단 보도"의 이미지 너비가됩니다. 그런 다음 .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; 
}