How to place text vertically aligned top right side of image

[vikramvi]

I googled and tried different solutions but couldn’t get text vertically aligned on top right side of an image.

mainly played around with transform , translate , writing-mode properties but couldn’t place text at exact location.

Please help

[ErFy]

Could you share a demo code? You want the Product owener to be on the image of top right corner?

[vikramvi]

 <div class="profiles">
            <div class="first">
                <div class="img-container">
                    <p>PRODUCT OWNER</p>
                    <img src="images/photo1.png">
                    <p>Bill Mahoney</p>
                </div>
.....

.img-container {
  display: inline-block;
  vertical-align: top;
  text-align: center;
  box-sizing: border-box;
  width: 350px;
  height: 450px;
  padding: 25px 12px;
  margin-bottom: 40px;
}

div > img {
  width: 300px;
  height: 400px;
}

.img-container > p:first-of-type {
  color: red;
  text-align: right;
}

Requirement is Product owner should be shown vertical outside of the image vertically as per attachment shared earlier

[ErFy]

<div class="profiles">
  <div class="first">
    <div class="img-container">
      <p>PRODUCT OWNER</p>
      <img src="images/photo1.png">
      <p>Bill Mahoney</p></div>
      </div>
  </div>
<div>

.img-container {
  display: inline-block;
  vertical-align: top;
  text-align: center;
  box-sizing: border-box;
  width: 350px;
  height: 450px;
  padding: 25px 12px;
  margin-bottom: 40px;
}

div > img {
  width: 300px;
  height: 400px;
}

.img-container > p:first-of-type {
  color: red;
  position: absolute;
  transform: rotate(90deg);
  left: 280px;
  top: 80px;
}

Is this what you want?

[vikramvi]

no, your solution didn’t work. Can you check PRODUCT OWNER text against the image ?

Your solution is using position: absolute which is placing text at top of image at random place.

There are in total 6 images and I need to place their designation

[ErFy]

<div class="profiles">
  <div class="first">
    <div class="img-container">
      <p>PRODUCT OWNER</p>
      <img src="images/photo1.png">
      <p>Bill Mahoney</p>
    </div>
  </div>
</div>
<div class="second">
  <div class="img-container">
    <p>PRODUCT OWNER 2</p>
    <img src="images/photo1.png">
    <p>Bill Mahoney</p>
  </div>
</div>
</div>
<div>

.img-container {
  padding: 25px 12px;
  margin-bottom: 40px;
  position: relative;
}

div > img {
  width: 300px;
  height: 400px;
}

.img-container > p:first-of-type {
  color: red;
  position: absolute;
  transform: rotate(90deg);
  left: 260px;
  top: 80px;
}

What about this one? Check out demo on codepen

[vikramvi]

Thanks, now I’ve exactly same code like yours but it’s showing like below

1. Why is words not in single line ?

2. Why are they overlapping image ?

sometimes CSS is really big mystery and hard to find where am I going wrong

[ErFy]

Check the codepen again.

@vikramvi

sometimes CSS is really big mystery and hard to find where am I going wrong

You need to practise and play around with styles.

[lasjorg]

You should be able to use writing-mode. But it does seem like you get some overflow. I would need to see it in some different contexts to know how that might affect things.

writing-mode

[vikramvi]

Thanks, so if I understand correctly

absolute position and width of 100% along with rotate did the trick right ?

[vikramvi]

This is also a nice solution, thanks for sharing.

[ErFy]

@vikramvi

absolute position and width of 100% along with rotate did the trick right ?

In this case yes. Remember that we also used position: relative; in the container.