CODEWITHSUNDEEP
cssflexboxvertical-alignmentrotatetransform
Tobias Pitzer
Tobias Pitzer

Reputation: 23

Flexbox Vertical alignment and rotation of text

I want to label a section on the left or right side. The label for each section should be centered vertically and rotated by 90 degrees.

image

I tried to archive this with flexbox, but the label text always flows to the right, depending on the text-length of the label. I have no idea how to fix this.

Upvotes: 1

Views: 2492

Answers (2)

Gerard
Gerard

Reputation: 15796

I used a nested flexbox for alignment.

.section {
  display: flex;
  height: 10em;
  border: thin solid darkgray;
}

.section:not(:last-child) {
  margin-bottom: 0.5em;
}

.label {
  width: 3em;
  background: darkgray;
  display: flex;
  justify-content: center;
  align-items: center;
}

.label p {
  transform: rotate(270deg);
}

.content {
  padding: 0.5em;
}
<div class="container">
  <div class="section">
    <div class="label">
      <p>Label</p>
    </div>
    <div class="content">Lorem Ipsum</div>
  </div>
  <div class="section">
    <div class="label">
      <p>asdlkfdfdasdlfasd</p>
    </div>
    <div class="content">Lorem Ipsum</div>
  </div>
</div>

Upvotes: 3

Vadim Ovchinnikov
Vadim Ovchinnikov

Reputation: 14032

The issue is that transformed element occupies the same place in layout like it was non-transformed. So you'll have to use absolute positioning to fix it. Demo:

.section {
  position: relative;
  /* move content to label width + some offset */
  padding-left: 35px;

  /* just styles for demo */
  background-color: #e0e0e0;
  height: 100px;
}

.label-wrapper {
  /* absolutely positioned-element */
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  /* setting height of content + some offset */
  width: 30px;
  /* become a flex-container */
  /* its children will be flex-items */ 
  display: flex;
  /* center flex-items vertically */
  align-items: center;
  /* center flex-items horizontally */
  justify-content: center;

  /* just style for demo */
  background-color: #a0a0a0;
}

.label {
  /* rotate text */
  transform: rotate(-90deg);
}
<div class="section">
  <div class="label-wrapper">
    <div class="label">
      ASD
    </div>
  </div>
  This is content
</div>

Upvotes: 0

Related Questions