Vertically & Horizontally Align Text After CSS Rotation

Vertically & horizontally align text after CSS rotation

You could pull it back in with a few CSS properties...

#whatever {
    position: relative;
    top: -4px;
    right: -10px;
}

Alternatively, you could play with the transform-origin property:

transform: rotate(-90deg);
transform-origin:20% 40%;
-ms-transform: rotate(-90deg); /* IE 9 */
-ms-transform-origin:20% 40%; /* IE 9 */
-webkit-transform: rotate(-90deg); /* Safari and Chrome */
-webkit-transform-origin:20% 40%; /* Safari and Chrome */
-moz-transform: rotate(-90deg); /* Firefox */
-moz-transform-origin:20% 40%; /* Firefox */
-o-transform: rotate(-90deg); /* Opera */
-o-transform-origin:20% 40%; /* Opera */

Vertically center rotated text with CSS

The key is to set position top and left to 50% and then transformX and transformY to -50%.

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

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

see: http://jsfiddle.net/CCMyf/79/

Align vertical rotated text with horizontal text

This is quite hard and seems like you need some real help here :)

I'll try to explain in code:

@import 'https://fonts.googleapis.com/css?family=Oswald';
h2 {  text-align: right;  font-family: 'Oswald', sans-serif;  text-transform: uppercase;  font-size: 8em;  line-height: 1.1em;}
h2 span.smallVertical {  font-size: 12%;  letter-spacing: 0.1em;    /*float: left;                 /* NOOOOOOOOOOOO :) */  display: inline-block;         /* use this instead of float:left */  transform: rotate(-90deg) translateY(50%); /* Add: translateY 50% */  width: 8em;                    /* same as font size (OR A BIT SMALLER) */  text-align:center;             /* to center text inside the red thing */  vertical-align:top;            /* top to "center" span... (yeah I know...) */  background:rgba(255,0,0,0.1);  /* just to see what the heck we're doing */  white-space: nowrap;           /* prevent small text wrap at 8em */}
h2 span.orangeText {  color: #FF9900;}

<h2>  <span class="smallVertical orangeText">We're Just A</span>  Small<br/>Company<br/>  <span class="smallVertical">Striving For A</span>  <span class="orangeText">Big Feel</span></h2>

Vertical alignment and positioning of rotated text in a table or grid

I have a different solution to your problem using CSS grid layout:

1. Note the change in markup without using tables. Create a grid layout using display: grid - note that the   in the markup is for an empty grid item.
2. Make a three-column layout with min-content width using grid-template-columns: repeat(3, min-content) on the outer container.
3. Fit the second row to the height of the middle element by using grid-template-rows: 1fr min-content

4. For the vertical alignment, I am using writing-mode:

   .wmode {
      writing-mode: tb-rl;
      transform: rotate(-180deg);
   }
   

See demo below:

.container {  display: grid;  grid-template-columns: repeat(3, min-content);  grid-template-rows: 1fr min-content;  justify-content: center;}
.c10 {  font-variant: small-caps;}
.text-body-2-western {  text-align: center;  text-indent: 0em;}
.wmode {  writing-mode: tb-rl;  transform: rotate(-180deg);}

<div class="container">     <p class="text-body-2-western">MAIN TITLE OF THE TABLE SHOULD CENTER HORIZONTALLY</p>     <p class="text-body-2-western wmode"><span class="c10">test title.</span><br>this is a test string of text rotated vertically that should fit within the table td limits.</p>  <img src="https://via.placeholder.com/400x338?text=image">  <p class="text-body-2-western wmode"><span class="c10">test title.</span><br>this is a test string of text rotated vertically that should fit within the table td limits but for some reason reaches outside of it.</p>     <p class="text-body-2-western text-body-no-spacing"><span class="c10">bottom title in small caps.</span></p>   </div>

CSS rotate text but keep the vertical alignment

You can use either css "transform: skew" property
e.g.

.text {
    transform: skew(0,-10deg);
}

or if you need perspective view you can use "perspective" and "transform: rotateY" properties
e.g.

.parentDiv : {
    perspective: 500px;
}
.text: {
    transform: rotateY(30deg);
}

http://jsfiddle.net/yjo3aanr/

How to align rotated text in the middle of a div

This worked for me:
http://davidwalsh.name/css-vertical-text

also tried to use flexboxes. But as they are (still) not fully supported by all browsers especially (mobile) safari - on which it must work I go with a more supported approach.

How can I vertically center rotated text using Flexbox layout?

Add white-space: nowrap and center horizontally and vertically using:

align-items: center;
justify-content: center;

(and you don't need the flex: 1!)

Also removed the browser margin and added in box-sizing: border-box to add the finishing touches.

See demo below:

* {  box-sizing: border-box;}html,body {  height: 100%;  margin: 0;}body {  background-color: #efefef;}body > div {  background-color: white;  border: 1px solid black;  display: flex;  height: 100%;  width: 25px;  align-items: center;  white-space: nowrap;  justify-content: center;}body > div > div {  transform: rotate(-90deg);}

<div>  <div>    Where did I go?  </div></div>

Horizontal and bottom alignment of rotated text

This layout is a bit tricky to achieve without absolute positioning.

Check out the solution - https://codepen.io/trentmrand/pen/KvPgXY

---

I've removed the content container, so your resulting HTML is now as follows,

 <div class="c-key">
  <div class="c-key__label">Some label</div>
  <h1 class="c-key__title">
    Milestones
  </h1>
</div>

I've also updated your SCSS to use absolute positioning, as follows,

.c-key {
  width:600px; 
  height: 600px;
  position: relative; // make container use relative positioning
  background: #000;

  &__label {
    background: #fff;
    border-right: 1px solid #000;
    font-size: 13px;
    padding: .25rem .5rem;
    text-transform: uppercase;
  }

  &__title {
    color: #fff;
    font-size: 5rem;
    transform: translateX(46px) rotate(-90deg); // rotate text and translate half of the text height to center
    transform-origin: left bottom; // rotate from bottom-left
    position: absolute; // use absolute positioning with this element
    bottom: 0; // position at bottom of parent element
    left: 50%; // position at middle of parent element
    margin: 0 !important; // remove default padding from header tag
  }
}

---

Related Topics