隣り合った画像のセンタリングとフローティング

Question

さて、今はウェブサイトを構築しています。そして事は、私はその部分にホバリング要素を持っています。私はそれを上に置くと、私はこれらの2つのアイコンを表示したい、私は完全に行うことができます。しかし、問題は、私は2つのアイコンがあり、それらを中心にしたいということです。しかし、私はそれらを中心に問題があります。これは私のコードのように見えるものです。私はそれらを両方とも中央に集中させたいが、重なり合わないようにする。ありがとう！

  <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プロパティ「の表示を適用することにより：インラインブロック;コンテナdivには幅が子の幅に設定されています。この場合は "The Rainbow Crosswalk"の画像の幅です。次に、.charahover divの幅を100％に設定すると、画像の幅と同じ幅のコンテナの幅に渡り、その結果、画像が中央に配置されます。また、.charahover divを100％に設定すると、配置された要素でのみ可能なので、コンテナdivに配置を適用する必要があります。また、同じ名前の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; 
}