Rotate text -90deg and vertically align with div

user_2254304 0
Viewed 51779

I'm attempting to vertically align text that has been rotated by -90deg and not having much luck. Code below

HTML:

<section class="page_block" style="background: <?php echo $background; ?>;">
    <div class="row">
        <div class="col-md-1">
            <div id="header">
                <h1 class="verticaltext">
                    <?php echo $page->post_title; ?>
                </h1>
            </div>
        </div>
        <div class="col-md-11">
            <p><?php echo $page->post_content; ?></p>
        </div>
    </div>
</section>

CSS:

.page_block {
    margin:0px;
    padding:10px;
}
#header { 
    position: relative; 
}
.verticaltext {
    transform: rotate(-90deg);
    transform-origin: right, top;
    -ms-transform: rotate(-90deg);
    -ms-transform-origin:right, top;
    -webkit-transform: rotate(-90deg);
    -webkit-transform-origin:right, top;

    position: absolute; bottom: 0%; left: 0%;
    color: #ed217c;
}

The result is like. This is a Wordpress theme, with Twitter Bootstrap implemented as well as a full width slider. I have confirmed that both Bootstrap and the Slider do not contain conflicting CSS.

twitter-bootstrap wordpress css html
5 Answers

enter image description here

HTML

<div class="container">
    <div class="vertical">Vertical Text Here</div>
    <div>
        <div>Horizontal Text Here</div>
        ...
        <div>Horizontal Text Here</div>
    </div>
</div>

CSS

.container{
     display: grid;
     grid-auto-rows: minmax(min-content, max-content);
     grid-template-columns: auto 1fr;
}

.vertical{
     transform: rotate(180deg);
     writing-mode: vertical-lr;
     text-align: center;
}

Explanation

To achieve -90 deg text

writing-mode: vertical-lr writes text vertically but is basically equivalent to rotating the text 90 degrees. With transform: rotate(180deg) we end up with the -90 degrees look we want.

To vertically align rotated text

I used grid and grid-template-columns to put the rotated text beside the div. This way the div can hold multiple lines or other things. Use text-align to align the rotated text however you want. In this case it's center.

note: You may not need: grid-auto-rows: minmax(min-content, max-content). If the rotated text's height does weird things, this can used to force wrap the rotated text to fit its content.

user_64777960
user_57924530
Related