CODEWITHSUNDEEP
htmlcsstextrotation
Richard Gale
Richard Gale

Reputation: 1952

CSS Centering Rotated Text in a div

I am setting up a design that I have had passed to me.

The design requires a left aligned div (class=banner) to be placed right down the left hand side of the outer div.

This div is then to contain rotated text (-90deg) which needs to be centered and v-align middle within the div.

The issue is, this text can be of differing height and also differing length and font.

Is there a way that I can update my css to ensure the text always lands in the center of its parent div?

.banner
{
    height:90%; 
    width:5%;
    padding:5%;
    text-transform: uppercase;
}

.rotated
{
    position:relative;
    float:left;
    top: 50%;
    left: 50%;
    height: 2px;
    margin-top: -1px;
    margin-left: -100%;
    text-align: center;
    display:inline-block;
    transform: translateX(-50%) rotate(-90deg);
    white-space: nowrap;
}

jsFiddle

Upvotes: 0

Views: 1805

Answers (1)

pzworks
pzworks

Reputation: 165

Just add: 

display: flex;
justify-content:center;

to #Ticket property. https://jsfiddle.net/yz3jL58y/1/

Upvotes: 2

Related Questions