Putting a button in the middle of an image and text below - html

Question

I am having css problem here. I am trying to place my play button at the middle of an image and couple of text lines beneath it. What I am chasing is similar to an audio player where the image is the cover picture, the button is the play icon and the 3lines of texts. I dont even know where to start. my html are...
.track {
width: 400px;
height: 400px
}
.track-info {
display: inline-block;
float: left;
width: 160px;
height: auto;
}
img {
width: 400px;
height: 400px;
position: absolute
}
<div class="track">
<img src="image.jpg">
<div>
<button>playbutton</button>
</div>
<div class="track-info">
<h3>Artist Name</h3>
<h4>Track title</h4>
<h5>Any text</h5>
</div>
</div>
I have played a round with left, right and top margins but it Looks like positioning and displays is the only way to solve it for me

Answer 1

Assuming you want the button to be in the middle of the image, with the text below, you'll want the button to have position: absolute, along with a top and left offset that is a calculation based on the size of the image. I've given the button <div> the class of .play for clarity in this example :
.track img {
width: 400px;
height: 400px;
}
.track .play {
position: absolute;
top: calc((400px / 2) - (22px / 2)); /* Half image height minus half button height */
left: calc((400px / 2) - (78px / 2)); /* Half image width minus half button width */
}
<div class="track">
<img src="http://placehold.it/100">
<div class="play">
<button>playbutton</button>
</div>
<div class="track-info">
<h3>Artist Name</h3>
<h4>Track title</h4>
<h5>Any text</h5>
</div>
</div>
Hope this helps! :)

Answer 2

Put the button in a text absolutely positioned to the center, then absolutely position the track info below that centered element. That will put the button in the center, with the text centered underneath.
You can also make the image a background image of .track though I didn't do that. Commented out the CSS you would use to do that, then you would remove the img from your html and the img block in your css.
.track {
/* background: url('https://i.stack.imgur.com/2C22p.jpg') 0 0 no-repeat / cover; */
width: 400px;
height: 400px;
position: relative;
background: url('') 0 0 no-repeat / cover;
}
.centered {
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%,-50%);
}
.track-info {
position: absolute;
top: 100%;
width:160px;
left: 50%;
transform: translateX(-50%);
text-align: center;
}
img {
width: 400px;
height: 400px;
position: absolute;
}
<div class="track">
<img src="https://i.stack.imgur.com/2C22p.jpg">
<div class="centered">
<button>playbutton</button>
<div class="track-info">
<h3>Artist Name</h3>
<h4>Track title</h4>
<h5>Any text</h5>
</div>
</div>
</div>

Answer 3

Your issue is with positioning you should try :
.image-div {
position: relative;
}
.button {
position: absolute;
top :150px;
left:190px;
}
<div class="img-div">
<img src="https://i.ytimg.com/vi/5dsGWM5XGdg/hqdefault.jpg"/>
<button class="button">Click me</button>
</div>

Answer 4

For align Horizontal use margin:0 auto
For align Vertical use Formula:((parent's width /2) + (width / 2))
img {
width: 400px;
height: 400px;
}
.track {
position: relative;
width: 400px;
height: 400px;
}
.center {
position: relative;
width: 200px;
height: 200px;
display: block;
text-align: center;
margin: 0 auto;/*align Horizontal */
top: -300px;/*align Vertical:((parent's width /2) + (width / 2))*/
}
.track-info {
background-color: rgba(0,0,0,0.3);
color: #FFF;
}
<div class="track">
<img src="http://www.mrwallpaper.com/wallpapers/cute-bunny-1600x900.jpg">
<div class="center">
<div>
<button>playbutton</button>
</div>
<div class="track-info">
<h3>Artist Name</h3>
<h4>Track title</h4>
<h5>Any text</h5>
</div>
</div>
</div>