0

I want to place some text on top and in the middle of an image. Also the .badge-card css styling cant change, because I have my image in a absolute position. Any ideas on how to do this?

.badge-container {
  position: relative;
  text-align: center;
}

.badge-card {
  top: -10px;
  position: absolute;
  left: -10px;
  z-index: 9;
}
.badge-text-centered {
  position: absolute;
  top: 50%;
  left: 50%;
  color: black;
  font-weight: bolder;
  font-size: 14px;
  transform: translate(-50%, -50%);
  z-index: 10;
}
  <div class="badge-container">
  <img class="badge-card"
     src="https://homepages.cae.wisc.edu/~ece533/images/fruits.png"
     alt="Grapefruit slice atop a pile of other slices">
<div class="badge-text-centered">New<br> Image</div>
                            </div>
Dev
  • 437
  • 6
  • 25
  • 1
    why do you want your image to be position absolute? – Mouna May 28 '20 at 10:21
  • The problem is that your container wont have a height because anything absolute wont create height. Either you set a fixed height or just have your image relative, In this case I don't get why it should be absolute? – Dejan.S May 28 '20 at 10:23

3 Answers3

1

there is 2 ways to do it, 1. id using flex , simple and effective, 2nd is using the position absolute, which you were trying The problem with this is, that when you use position absolute to inner items, then they behave like floating items and their height and width doesn't add to parent's height or width, in your case the main container does not have heigh to center the text and you are facing this issue

Solution: Try using min-height or height on parent container, I have used 100vh to make its height equal to body height.

.badge-container {
      position: relative;
    text-align: center;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.badge-card {
      top: -10px;
    position: absolute;
    left: -10px;
    z-index: 9;
    height: 100%;
    width: 100%;
    object-fit: cover;
}
.badge-text-centered {
  color: black;
  font-weight: bolder;
  font-size: 14px;
  z-index: 10;
}
<div class="badge-container">
  <img class="badge-card"
     src="https://homepages.cae.wisc.edu/~ece533/images/fruits.png"
     alt="Grapefruit slice atop a pile of other slices">
<div class="badge-text-centered">New<br> Image</div>
                            </div>

Check this second option, the approach which you were using,

.badge-container {
  position: relative;
  text-align: center;
height: 100vh;
}

.badge-card {
      top: -10px;
    position: absolute;
    left: -10px;
    z-index: 9;
    object-fit: cover;
    height: 100%;
    width: 100%;
}
.badge-text-centered {
  position: absolute;
    top: 50%;
    left: 50%;
    color: black;
    font-weight: bolder;
    font-size: 14px;
    transform: translate(-50%, -50%);
    z-index: 10;
}
  <div class="badge-container">
  <img class="badge-card"
     src="https://homepages.cae.wisc.edu/~ece533/images/fruits.png"
     alt="Grapefruit slice atop a pile of other slices">
<div class="badge-text-centered">New<br> Image</div>
                            </div>
Atul Rajput
  • 4,073
  • 2
  • 12
  • 24
0

https://codepen.io/divided7/pen/zYvVBGM I made you a codepen. Here, I just floated the div to wherever you want it to be (left, in your case), and removed styling of the .badge-card element.

.badge-container {
  position: relative;
  text-align: center;
    float:left;
}
ssomename
  • 505
  • 6
  • 21
0

Change position to position: relative; in class badge-card

.badge-container {
  position: relative;
  text-align: center;
}

.badge-card {
  top: -10px;
  position: relative;
  left: -10px;
  z-index: 9;
}
.badge-text-centered {
  position: absolute;
  top: 50%;
  left: 50%;
  color: black;
  font-weight: bolder;
  font-size: 14px;
  transform: translate(-50%, -50%);
  z-index: 10;
}
<div class="badge-container">
      <img class="badge-card"
         src="https://homepages.cae.wisc.edu/~ece533/images/fruits.png"
         alt="Grapefruit slice atop a pile of other slices">
    <div class="badge-text-centered">New<br> Image</div>
                                </div>
Learning
  • 19,469
  • 39
  • 180
  • 373