How to align the elements correctly when using transform: rotate(90 deg)?-CodePudding

How to align the elements correctly when using transform: rotate? I don 't understand how to fix it . Please tell me where I made a mistake

svg {
  width: 200px;
  height: 100px;
}

.item {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  text-align: center;
  justify-content: center;
  color: BLACK;
}

.item.revers {
  transform: rotate(90deg);
}

<svg width="247" height="160" viewBox="0 0 247 160" fill="none" xmlns="http://www.w3.org/2000/svg">
  <g>
    <rect x="185" width="62" height="160" fill="#D9D9D9"/>
    <foreignObject x="185" width="62" height="160"}>
      <div class='item revers'>
        <div class='category'> category </div>
        <div class='label'> category123 </div>
      </div>
    </foreignObject> 
  </g>
</svg>

CodePudding user response：

Take a look here which completely helps us to understand the flex https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container

Instead of text-align: center; use align-items: center;

    svg {
      width: 200px;
      height: 100px;
    }

    .item {
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      color: BLACK;
      align-items: center;
    }

    .item.revers {
      transform: rotate(90deg);
    }

    <svg width="247" height="160" viewBox="0 0 247 160" fill="none" xmlns="http://www.w3.org/2000/svg">
      <g>
        <rect x="185" width="62" height="160" fill="#D9D9D9"/>
        <foreignObject x="185" width="62" height="160"}>
          <div class='item revers'>
            <div class='category'> category </div>
            <div class='label'> category123 </div>
          </div>
        </foreignObject> 
      </g>
    </svg>

CodePudding user response：

You miss align-items property in item flexbox.

svg {
  width: 200px;
  height: 100px;
}

.item {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: black;
}

.item.revers {
  transform: rotate(90deg);
}

<svg width="247" height="160" viewBox="0 0 247 160" fill="none" xmlns="http://www.w3.org/2000/svg">
  <g>
    <rect x="185" width="62" height="160" fill="#D9D9D9"/>
    <foreignObject x="185" width="62" height="160"}>
      <div class='item revers'>
        <div class='category'> category </div>
        <div class='label'> category123 </div>
      </div>
    </foreignObject> 
  </g>
</svg>