Tailwind or regular css to fix img center and an anchor tag-CodePudding

I want the link not to work outside the img.

This is my code. What do you think is the best way to center the img, I'm new web developer so need some professionals opinion =)

.video__text-box {
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

<div >
  <div >
    <a href="" ></a>
    <img src="" alt="" >
    <div >
      <img  src="" alt="">
      <div >
        <span >xxxxxxx</span>
        <h2 >watch video</h2>
      </div>
    </div>
  </div>
</div>

Because of the margin the link is clickable outside the img.

CodePudding user response：

It's no point to mix tailwind with regular CSS just if you need to center the children inside the container. You can use flex items-center justify-center. But I suggest you to understand first CSS and after move to a CSS framework, if you understand CSS after you will write more naturally in any CSS framework.

CodePudding user response：

As @claudiu mentioned, there really is no point to mix tailwind with traditional CSS as tailwind is just a CSS framework like Bootstrap which is designed to avoid writing CSS.

With that being said, you can remove your absolute's as absolute positioning will not pair well with flex. Then just adjust the order of your markup a bit and nest your href around the image you want to link to a video.

See it working here: Tailwind Play

Another version with your traditional CSS. You should nest each span and h2 in their own a. You are using w-full on those elements which is the same as width: 100%; allowing you to click them off the text. Use w-fit or width: fit-content; instead.

See that version here: Tailwind Play