I've come across many questions and answers similar to mine, but none quite fit what I'm aiming for.
Here's the HTML code:
<div class="container">
<div class="inner">
<div class="image-container">
<img src="http://fpoimg.com/600x300" alt="" />
<a href="" class="close-link">x</a>
</div>
<div>image name</div>
<div>id: 123456</div>
</div>
and the corresponding CSS:
* {
font-family: sans-serif;
}
.container {
position: relative;
border: 1px solid;
width: 500px;
height: 500px;
}
img {
max-height: 100%;
max-width: 100%;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
.close-btn {
position: absolute;
background: red;
padding: 4px 8px;
border-radius: 50%;
color:white;
text-decoration: none;
}
View the jsfiddle demo here - https://jsfiddle.net/61afw70q/10/
My goal is to position the red cross button at the top-right corner of the IMAGE, not the container. It needs to adjust according to each image size as they all differ. The image should be centered within the container.
This is a simplified version of my overall webpage layout.