Vertically Center Rotated Text with CSS

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/

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>

How to Center Rotated text with CSS

Actually it's very simple:

.tab-caption {
    position: absolute;
    /* width: 100%; */ /* (remove this) width before rotation! */
    top: 50%;
    height: 2px;  /* actual text will overlap! */
    margin-top: -1px;  /* subtract half the height */
    line-height: 0px;  /* centre the text on the base line */
    text-align: center;
    left: 50%; /* added */
    transform: translateX(-50%) rotate(90deg); /* added translateX */
    white-space: nowrap;
}

Demo http://jsfiddle.net/pzvuntd4/2/

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>

Rotate text -90deg and vertically align with div

In the end, I've had to give up on the CSS front and generate the titles as transparent PNGs using GD. Not ideal, but gives me a lot more flexibility in terms of positioning. If anyone is interested in the rotation script I'm using, it's below

define("DEFAULT_FONT", "fonts/BebasNeue-webfont.ttf");
define("DEFAULT_COLOR", "ed217c");
define("DEFAULT_SIZE", 24);
define("DEFAULT_ANGLE", 0);
define("DEFAULT_PADDING", 10);
define("DEFAULT_SPACING", 0);

$text = $_GET['text'];
if(isset($_GET['transform'])):
    switch ($_GET['transform']){
        case 'uc':
            $text = strtoupper($_GET['text']);
            break;

        case 'lc':
            $text = strtolower($_GET['text']);
            break;

        case 'ucf':
            $text = ucfirst($_GET['text']);
            break;

        case 'ucw':
            $text = ucwords($_GET['text']);
            break;
    }
endif;

$font = $_GET['font'] ? $_GET['font'] : DEFAULT_FONT;
$color = (strlen($_GET['color']) == 6 && ctype_alnum($_GET['color']))  ? "0x" . $_GET['color'] : "0x" . DEFAULT_COLOR;
$size = (is_numeric($_GET['size'])) ? $_GET['size'] : DEFAULT_SIZE;
$angle = (is_numeric($_GET['angle'])) ? $_GET['angle'] : DEFAULT_ANGLE;
$padding = (is_numeric($_GET['padding'])) ? $_GET['padding']*4 : DEFAULT_PADDING*4;
$spacing = (is_numeric($_GET['spacing'])) ? $_GET['spacing'] : DEFAULT_SPACING;
$text_dimensions = calculateTextDimensions($text, $font, $size, $angle, $spacing);
$image_width = $text_dimensions["width"] + $padding;
$image_height = $text_dimensions["height"] + $padding;

$new_image = imagecreatetruecolor($image_width, $image_height);
ImageFill($new_image, 0, 0, IMG_COLOR_TRANSPARENT);
imagesavealpha($new_image, true);
imagealphablending($new_image, false);
imagettftextSp($new_image, $size, $angle, $text_dimensions["left"] + ($image_width / 2) - ($text_dimensions["width"] / 2), $text_dimensions["top"] + ($image_height / 2) - ($text_dimensions["height"] / 2), $color, $font, $text, $spacing);
imagepng($new_image);
imagerotate($new_image, 90, 0);
imagedestroy($new_image);

function imagettftextSp($image, $size, $angle, $x, $y, $color, $font, $text, $spacing = 0)
{
    if ($spacing == 0)
    {
        imagettftext($image, $size, $angle, $x, $y, $color, $font, $text);
    }
    else
    {
        $temp_x = $x;
        for ($i = 0; $i < strlen($text); $i++)
        {
            $bbox = imagettftext($image, $size, $angle, $temp_x, $y, $color, $font, $text[$i]);
            $temp_x += $spacing + ($bbox[2] - $bbox[0]);
        }
    }
}

function calculateTextDimensions($text, $font, $size, $angle, $spacing) {
    $rect = imagettfbbox($size, $angle, $font, $text);
    $minX = min(array($rect[0],$rect[2],$rect[4],$rect[6]));
    $maxX = max(array($rect[0],$rect[2],$rect[4],$rect[6]));
    $minY = min(array($rect[1],$rect[3],$rect[5],$rect[7]));
    $maxY = max(array($rect[1],$rect[3],$rect[5],$rect[7]));
    $spacing = ($spacing*(strlen($text)+2));
    return array(
        "left"   => abs($minX) - 1,
        "top"    => abs($minY) - 1,
        "width"  => ($maxX - $minX)+$spacing,
        "height" => $maxY - $minY,
        "box"    => $rect
    );
}
    header("content-type: image/png");

Modified from Jason Lau's awesome script, which can be found here.

How to vertically center rotated text in a div with a float attribute?

You can do this with absolute positioning, but without having to manually push the content into its place by simply adding these rules to your existing css:

.button {
    position: relative;
}

.rotare {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
}

Here's a JS Fiddle of it in action: http://jsfiddle.net/grammar/NgrWg/
And here's an article explaining this method of vertical centering in more detail: http://coding.smashingmagazine.com/2013/08/09/absolute-horizontal-vertical-centering-css/

EDIT - secondary approach without absolute positioning

Another approach is to use table and table-cell as the display property for the wrapper and text respectively. I've updated the fiddle to show that method as well: http://jsfiddle.net/grammar/NgrWg/1/.

Here's another article that explains this table-cell trick, and also outlines a third technique for centering things vertically: http://css-tricks.com/centering-in-the-unknown/

Centering rotated text in td

Don't use rotation but adjust the writing-mode. The text will get centred and you no more need to force the width:

td:not([rowspan]) {

  width: 60px

}

p {

  margin:5px;

  writing-mode: vertical-lr;

  transform: scale(-1);

}

<table border="1">

  <tbody>

    <tr>

      <td rowspan="12">

        <p>There is information text</p>

      </td>

      <td>1</td>

    </tr>

    <tr>

      <td>2</td>

    </tr>

    <tr>

      <td>3</td>

    </tr>

    <tr>

      <td>4</td>

    </tr>

    <tr>

      <td>5</td>

    </tr>

    <tr>

      <td>6</td>

    </tr>

    <tr>

      <td>7</td>

    </tr>

    <tr>

      <td>8</td>

    </tr>

    <tr>

      <td>9</td>

    </tr>

    <tr>

      <td>10</td>

    </tr>

    <tr>

      <td>11</td>

    </tr>

    <tr>

      <td>12</td>

    </tr>

  </tbody>

</table>

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>

---

Related Topics