0

I created a static block with the following issue:

I'm trying to center text inside an ahref element, which looks like the following;

    <div class="small-24 medium-16 cell">
    <a title="Chairs" href="/chairs"><img src="{{media url="wysiwyg/chair-1.png"}}" alt="Chairs" width="830" height="325">Chairs</a>
    </div>

Normally, I would position it as follows, with the text in a span in the ahref element next to the img:

a {
   position: relative;
}
span {
position: absolute;
bottom: 10px;
left: 10px;
}

However, I'm not allowed to save the span tag inside the ahref element next to the image. See image underneath. enter image description here

How can I position the text inside the ahref element over the image?

1 Answer 1

0

Get rid of the width and height on the img and define it in your css instead. Set image to position: absolute. Make the a tag a flex box and center align elements both vertically and horizontally.

<div class="small-24 medium-16 cell">
    <a title="Chairs" href="/chairs">
        <img src="{{media url="wysiwyg/chair-1.png"}}" alt="Chairs">Chairs
    </a>
</div>



a {
    position: relative;
    width: 830px;
    height: 325px;
    display: flex;
    align-items: center;
    justify-content: center;
}

a img {
    position: absolute;
}
2
  • Note that adding width and height attributes to the image itself can help with improving CLS scores for Google's performance metrics
    – Ben Crook
    Jul 21, 2021 at 11:56
  • Not sure how that applies to position absolute though
    – Ben Crook
    Jul 21, 2021 at 11:57

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.