CODEWITHSUNDEEP
htmlcss
Kin
Kin

Reputation: 4596

How to align text one by one vertically in div?

I need to create a fixed menu button which would be assigned to the right side of the browser. Currently i my code looks lie this:

#button-side-menu {
    background: none repeat scroll 0 0 #F5F5F5;
    border-radius: 5px 5px 0 0;
    color: #363636;
    height: 28px;
    position: fixed;
    right: 16px;
    top: 91px;
    z-index: 2000;
    -moz-transform: rotate(270deg);
    -o-transform: rotate(270deg);
    -webkit-transform: rotate(-90deg);
    -moz-transform-origin: 100% 100%;
    -o-transform-origin: 100% 100%;
    -webkit-transform-origin: 100% 100%;
    padding: 10px;
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
}

enter image description here

Is it possible to center it in the div, the text was not adhered to the right side. And also is it possible to set test like this:

M
e
n
u

P.S. Site is multilingual so i need the text, not image in this case.

Upvotes: 0

Views: 58

Answers (1)

Kunjan Thadani
Kunjan Thadani

Reputation: 1670

This works:

#button-side-menu {
    background: none repeat scroll 0 0 #F5F5F5;
    border-radius: 5px 5px 0 0;
    color: #363636;
    width: 15px;
    position: fixed;
    right: 16px;
    top: 91px;
    z-index: 2000;
    word-wrap:break-word;
    text-align: center;
    padding: 10px;
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
}

Important: word-wrap and text-align are added to make it look like what you asked. Its width is fixed to 15px instead of height.

Upvotes: 1

Related Questions