Centering and Floating images next to each other - html

Question

Okay, so right now I'm building a website. and the thing is, I have a hover element on parts of it. Now when I hover over it I want these two icons to appear, which, I'm perfectly capable of doing. But the problem is, I have two icons and I want them centered. But I'm having trouble centering them. This is what my code looks like by the way. I want them both centered in the middle, but not overlapping. Thanks!
<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>
and this is my 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

I've edited your code in a jsFiddle (and removed extraneous markup/CSS) - https://jsfiddle.net/Shuaso/9g99ugsh/
By applying the CSS property "display: inline-block;" to the container div, it's width is set to the width of it's children, which in this case is the width of the image of "The Rainbow Crosswalk." And then, setting the width of the .charahover div to 100% makes it span the full width of it's container, which is the same width as the image, thus centering the hovered images. And you have to apply positioning to the container div as well so that when you set the .charahover div to 100% it can take that width of it, as this is only possible with a positioned element. Also, you have multiple ID's of the same name, so I would change that as it's not valid markup.
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;
}