CODEWITHSUNDEEP
htmlcss
Code Guy
Code Guy

Reputation: 3198

Rotated text not aligning properly using css

I have a text where the third column is not aligned propery

The expected look is

enter image description here

The obtained is

enter image description here

I have tried with

<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Lato:wght@700&display=swap" rel="stylesheet">

<style type="text/css">
table{
font-family: 'Lato', sans-serif;tborder:#777 1px solid;
}
    td {
        border-collapse: collapse;

    }

    tr:nth-of-type(5) td:nth-of-type(1) {
        visibility: hidden;
    }

    .rotate {
        -moz-transform: rotate(-90.0deg);
        /* FF3.5+ */
        -o-transform: rotate(-90.0deg);
        /* Opera 10.5 */
        -webkit-transform: rotate(-90.0deg);
        /* Saf3.1+, Chrome */
        filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0.083);
        /* IE6,IE7 */
        -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=0.083)";
        /* IE8 */
    }
</style>


<br><br><br>
<table>
    <tr>
        <td style="width:300px">CARPET<br>COMMON GROUND COLLECTION<br>SOFT PINE 6317</td>
        <td style="width:100px">
            <div>
<img src="https://lh3.googleusercontent.com/docsubipk/ADEo_uO6rEMDcnQ9AiaZCMcx-I2EBtnxfFTxLZqZewFylslhijByql7fnuZwe8npi5crXvXRhinlG_X8FmGZcqcaTlchwP5382PZtMU-6BP4_LrZBLPCJx4sodGs2d4I4uCPpELGQjE1pRT3dzM-Auz_XNsup1tx8tgnNNVODsr9UfUqurXSaDdo8dPsSW5u6jzDBVxJzlwqUVcRUy0FqEFvxUJgsPXQ1Ypg9pg=s103-w103-h99" style="width:inherit;height:inherit;object-fit:scale-down;object-position:center top;">
</div>
        </td>
        <td style="width:25px">
            <div class="rotate" style="width:20px;font-size:10">CARPT0000737</div>
        </td>
    </tr>
</table>

Upvotes: 0

Views: 471

Answers (3)

chrwahl
chrwahl

Reputation: 13163

Is it important that the content is in a table? In isolation it would make sense to use flexbox and align the elements centered.

Apparently, setting the y value in translate(-2em,0) to 0 will make the element align. I removed the prefixes for transform for better readability.

div.qr {
  font-family: 'Lato', sans-serif;
  display: flex;
  flex-direction: row;
  align-items: center;
}

.rotate {
  transform:  translate(-2em,0) rotate(-0.25turn);
  font-size: 10pt;
}
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Lato:wght@700&display=swap" rel="stylesheet">

<div class="qr">
  <div>CARPET<br>COMMON GROUND COLLECTION<br>SOFT PINE 6317</div>
  <img src="https://lh3.googleusercontent.com/docsubipk/ADEo_uO6rEMDcnQ9AiaZCMcx-I2EBtnxfFTxLZqZewFylslhijByql7fnuZwe8npi5crXvXRhinlG_X8FmGZcqcaTlchwP5382PZtMU-6BP4_LrZBLPCJx4sodGs2d4I4uCPpELGQjE1pRT3dzM-Auz_XNsup1tx8tgnNNVODsr9UfUqurXSaDdo8dPsSW5u6jzDBVxJzlwqUVcRUy0FqEFvxUJgsPXQ1Ypg9pg=s103-w103-h99"
    style="width:inherit;height:inherit;object-fit:scale-down;object-position:center top;">
  <div class="rotate">CARPT0000737</div>
</div>

Upvotes: 1

Tahir Iqbal
Tahir Iqbal

Reputation: 323

use this styling

transform-origin: center;
          font-size: 11px;
          margin: 0 -30px 0px -30px;

on rotate class

<div class="rotate" style=" transform-origin: center;
          font-size: 11px;
          margin: 0 -30px 0px -30px;">CARPT0000737</div>

and on its parent td tag

<td style="">

here is the complete change

<td style="">
            <div class="rotate" style=" transform-origin: center;
          font-size: 11px;
          margin: 0 -30px 0px -30px;">CARPT0000737</div>
        </td>

updated example https://codesandbox.io/s/musing-spence-l4pj6?file=/index.html

Upvotes: 0

Lakshman Kambam
Lakshman Kambam

Reputation: 1618

just remove width of CARPT0000737 div wrapper

<div class="rotate" style="width:20px; font-size:10">CARPT0000737</div>

also there is a typo in your table element css, property - tborder, should be border.

table{
   font-family: 'Lato', sans-serif; tborder:#777 1px solid;
}

i've made working CodeSandBox, check it

displaying QR Code Image and CARPT0000737 in same td using display:flex;

Upvotes: 0

Related Questions