CSS/HTML Placing a button on image

Question

How do I place a button at the bottom and center of an image? I currently have a carousel with multiple images which works fine, but when I try to add a button for navigation purposes it is positioned outside of the image to the right.

Here is the HTML:

<div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide">
            <img src="">
            <button type="button" class="btn btn-success">Click Me</button>
        </div>
    </div>
</div>

Can't help you without seeing your CSS. You'll need to be using the right combination of position: relative and position: absolute with the right elements to achieve what you want. — codeth
– codeth, Commented Mar 6, 2021 at 15:22
@codeth why do you need to see his css for it? No matter what, the css will work the same by using an absoltue positioning and a z-index. — tacoshy
– tacoshy, Commented Mar 6, 2021 at 15:23
@tacoshy Sure, but there are classes assigned and therefore clearly existing CSS. To help solve the problem appropriately it is useful to understand what the actual problem is. — codeth
– codeth, Commented Mar 6, 2021 at 15:31
@codeth those are satndard bootstrap classes. they wont interfere with custom css. — tacoshy
– tacoshy, Commented Mar 6, 2021 at 15:36

tacoshy · Accepted Answer · 2021-03-06 15:48:56Z

2

use position: relative; ont he wrapping parent then use position:absoltue; on the button. you can align it to the bottom by using bottom: 0; To cenetr an element in an absoltue positioning you have to use transform

div.swiper-slide {
  width: 400px;
  position: relative;
}

img {
  object-fit: contain;
}

div.swiper-slide > button {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}

<div class="swiper-wrapper">
  <div class="swiper-slide">
    <img src="https://via.placeholder.com/400x400.jpg">
    <button type="button" class="btn btn- success">click me</button>
  </div>
</div>

edited Mar 6, 2021 at 15:48

answered Mar 6, 2021 at 15:34

tacoshy

13.3k5 gold badges22 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

CSS/HTML Placing a button on image

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related