How to place text vertically aligned top right side of image

HTML-CSS
1

Screen Shot 2021-06-10 at 1.03.26 PM
Screen Shot 2021-06-10 at 1.03.26 PM770×954 361 KB

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

2

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

3 
 <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

4 
<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?

5

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

6 
<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

7

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

Screen Shot 2021-06-10 at 6.12.43 PM
Screen Shot 2021-06-10 at 6.12.43 PM726×992 442 KB

  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

8

Check the codepen again.

You need to practise and play around with styles.

9

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.

10

Thanks, so if I understand correctly

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

11

This is also a nice solution, thanks for sharing.

12

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

1 Like
13

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.