HTML + CSS - Making an Image Element a Parent? - html

Question

I know this may seem like a newby question, but is it possible to set an image element as a parent? If so, how can I do so?
Heres an example of what I'm looking for:
Also, the reason I can't just have the div element as the parent is that I want that text element relative to that image element, not the div element. This way I can center the text relative to the image. Thanks in advance for any help!

Answer 1

Looks like I've figured it out. I started messing with some values and I got it.
HTML:
<div id="main-div">
<img id="image" src="url.com/image.png">
<h1 id="text">Caption</h1>
</div>
CSS:
#main-div {
position: absolute;
top: 30px;
left: 50%;
margin: 0px auto;
transform: translate(-50%, 0);
}
#image {
position: absolute;
top: 130px;
left: 50%;
margin: 0px auto;
transform: translate(-50%, 0);
color: white;
font-family: "Roboto";
text-align: center;
}
#text {
position: absolute;
top: 30px;
left: 15%;
margin: 0px auto;
transform: translate(-50%, 0);
display: block;
border: thin red solid;
}
Here's a JS Fiddle of the code and final result: https://jsfiddle.net/k3b70Lg7/

Answer 2

No you cannot because image elements are replaced.
You can however wrap the image and the text element in another div and position that.
<div class="outer-black">
<div class="inner-image-text-wrapper">
<img src="..">
<div class="text"></div>
</div>
</div>
Now setting the wrapper to be inline-text means that it will expand according to contents (the image) and by setting it also to be position:relative you can position the text (position:absolute) wherever you want inside it.
Full example
.outer-black {
background: black;
padding: 2em;
}
.inner-image-text-wrapper{
position:relative;
display:inline-block;
}
.inner-image-text-wrapper img{display:block;}
.inner-image-text-wrapper .text{
position:absolute;
top:105%;
left:5%;
right:5%;
text-align:center;
background:rgba(255,255,255,0.5);
}
<div class="outer-black">
<div class="inner-image-text-wrapper">
<img src="http://lorempicsum.com/simpsons/300/200/1">
<div class="text">image caption</div>
</div>
</div>