CODEWITHSUNDEEP
htmlcss
Michelle Dimwaite
Michelle Dimwaite

Reputation: 115

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

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

Upvotes: 2

Views: 2592

Answers (4)

Obsidian Age
Obsidian Age

Reputation: 42304

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! :)

Upvotes: 1

Ehsan
Ehsan

Reputation: 12951

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>

Upvotes: 0

Michael Coker
Michael Coker

Reputation: 53664

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.sstatic.net/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.sstatic.net/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>

Upvotes: 0

Fady Sadek
Fady Sadek

Reputation: 1140

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>

Upvotes: 0

Related Questions