CODEWITHSUNDEEP
htmlcssflexbox
Roman Gulevskiy
Roman Gulevskiy

Reputation: 31

How to place rotated text properly?

I have a flex wrapper with 3 columns, in third column there is rotated text, how can I place the text to the bottom right position of the column?

What I want:

what I want

What I have:

what I have

.wrapper {
  border: 1px solid black;
  padding-top: 50px;
  display: flex;
  justify-content: space-between;
}

.column-2 {
  transform-origin: left bottom;
  transform: rotate(-90deg);
}
<div class="wrapper">
  <div class="column-1">Column 1</div>
  <div class="column-2">Column 2</div>
</div>

Upvotes: 2

Views: 253

Answers (4)

G-Cyrillus
G-Cyrillus

Reputation: 106058

writing-mode can also be used to rotate text :

The writing-mode CSS property sets whether lines of text are laid out horizontally or vertically, as well as the direction in which blocks progress. When set for an entire document, it should be set on the root element (html element for HTML documents).

possible examples:

.wrapper {
  border: 1px solid black;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.column-2 {
  writing-mode: vertical-lr;
  border: solid;
  margin: 2em;
}


/* also */

.wrapper.bis {
  align-items: end;
}

.bis .column-2 {
  margin: 0;
}
<div class="wrapper">
  <div class="column-1">Column 1</div>
  <div class="column-2">Column 2</div>
</div>
<hr>
<div class="wrapper bis">
  <div class="column-1">Column 1</div>
  <div class="column-2">Column 2</div>
</div>

An older similar answer : How do I center a transformed and rotated div? (when prefix was to be used ) applied here without prefix would do :

.wrapper {
  border: 1px solid black;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.column-2 {
  writing-mode: vertical-lr;
  transform:scale(-1);
  border: solid;
  margin: 2em;
}


/* also */

.wrapper.bis {
  align-items: end;
}

.bis .column-2 {
  margin: 0;
}
<div class="wrapper">
  <div class="column-1">Column 1</div>
  <div class="column-2">Column 2</div>
</div>
<hr>
<div class="wrapper bis">
  <div class="column-1">Column 1</div>
  <div class="column-2">Column 2</div>
</div>

If you want to stick to transform, here is an older answer of mine that allows to stretch the container according to the string length : How to display vertical text in table headers with auto height / without text overflow?

text-orientation can be usefull too :

The text-orientation CSS property sets the orientation of the text characters in a line. It only affects text in vertical mode (when writing-mode is not horizontal-tb). It is useful for controlling the display of languages that use vertical script, and also for making vertical table headers.

Upvotes: 6

Grazielle Carvalho
Grazielle Carvalho

Reputation: 453

You can do a display: flex on the columns div, and adjust them as you need. I've made an example on codepen

<div class="parent">
  <div class="child first">Column 1</div>
  <div class="child second">Column 2</div>
  <div class="child third"><p>Column 3</p></div>
</div>

And then the CSS:

.parent {
  display: flex;
}

.child {
  width: 20%;
  display: flex;
  height: 100px;
  border: 2px solid black;
}

.first {
  font-size: 40px;
}

.second {
  align-items: flex-end;
  justify-content: center;
}

.third p {
  transform: rotate(-90deg);
}

Upvotes: 0

SherlockMac
SherlockMac

Reputation: 329

Take a look at transform-origin

.wrapper {
  font-family: Arial;
  display: flex;
  flex-direction: row;
}

.wrapper div {
  padding: 0 20px;
}

.wrapper h3 {
  font-size: 0.4em;
  transform: rotate(-90deg);
  transform-origin: 35px 16px;
}
<div class="wrapper">
<div>
  <h1>Column 1</h1>
</div>
<div>
  <h2>Column 2</h2>
</div>
<div>
  <h3>Column 3</h3>
</div>
</div>

Upvotes: -1

Manish Shahi
Manish Shahi

Reputation: 1

You can do something like this

.inner {
    position: absolute;
    top: 50%;
    left: 50%;
}

.rotate {  
    transform:  translateX(-50%) translateY(-50%) rotate(-90deg);
}

Upvotes: -1

Related Questions