0

I want to align the text over an image to the center which I managed to do, but I am not sure how I can center the image(with centered text in it) to the top center of the grid cell. This is the output I have:

My Output

And this is my code:

    .inner-nested div.inner-four{
        grid-column: 2/3;
        grid-row:1/2;
        display: flex;
        font-family: 'Roboto', sans-serif;
        color: white;
        position: relative;
        text-align: center;
        margin: auto;
    }


    .nested div.inner-four img{
        flex-direction: column;
        align-items: center;
    }


    .inner-nested div.inner-four div.percentage{
        position: absolute;
        margin: auto;
        top: 10px;
        left:0;
        right:0;
        bottom:0;
        color:white;
        font-family: 'Roboto', sans-serif;
        font-size: 30px;
        margin-top: auto;

    }

<div class="inner-four"> 

    <img src="Pictures/shape.svg" style="height: 80px; width: 80px;">
    <div class="percentage">-50%</div>

</div>
AlyssaAlex
  • 696
  • 2
  • 9
  • 33
  • The flex properties don't belong on the image. If you're aligning elements using flexbox you need to do that on the parent. – Paulie_D Oct 08 '19 at 12:07

1 Answers1

1

try this : 

.container {
  position: relative;
  text-align: center;
  color: white;
}
.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
<div class="container">
  <img src="https://i2.wp.com/plus-riche.com/wp-content/uploads/2018/05/red-arrow-large-down.png" alt="Snow" style="width:60%;">
  <div class="centered">your text here</div>
</div>
becher henchiri
  • 618
  • 4
  • 10