How do I align this text?

Take a look at the screenshot below...

I'm using this CSS to facilitate that:

      .vertical-text {
      -webkit-transform: rotate(90deg);  
      -moz-transform: rotate(90deg);
      -ms-transform: rotate(90deg);
      -o-transform: rotate(90deg);
      transform: rotate(90deg);

Here's what I need:

another screenshot
I need to have the text read from the bottom up and I want to center it within the cell it's being displayed in.

Bruce GustPHP DeveloperAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Bruce GustPHP DeveloperAuthor Commented:
I just realized that I may have been a little vague...

I'm referring to the "DNS Failure %" text. I want to display it vertically within the cell.
greetings brucegust, , the rotation that u use is 90 degrees, if you need the rotation to be different angle then just change the angle to your needed rotation, incase you don't know, it would be the 180 difference as 270
.vertical-text {
      -webkit-transform: rotate(270deg);  
      -moz-transform: rotate(270deg);
      -ms-transform: rotate(270deg);
      -o-transform: rotate(270deg);
      transform: rotate(270deg);

Open in new window

Bruce GustPHP DeveloperAuthor Commented:
Slick, that's perfect! But the text is aligned to the right of the cell. How do I center it? I tried "text-align:center;" and "margin-auto;" to no avail.

OK, the lateral positioning, should not change from the original 90, as far as I know. You can try the css of     text-align:center;       in the PARENT container for the div, but if the   .vertical-text   element is a <div> or block element that may not be effective. you can also try to give a right margin %, maybe

margin-right: 22.7%;

and adjust the 22.7 , higher or lower to get a centering,

it also my be possible to use the padding-left:

but there are several dependencies, depending on the container structure used and the kind and number of elements you use.
Just realized, that the element was rotated, and so horizontal, becomes vertical, and vertical becomes horizontal, , you might can add -
    line-height: 200%;
in the   .vertical-text{}   and have it be moved, maybe centered

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today

From novice to tech pro — start learning today.