CODEWITHSUNDEEP
htmlcss
Airikr
Airikr

Reputation: 6436

Center vertically a rotated element

I want to center the vertically text in a DIV but I can't figure out how. As it is right now, I must use margin-top and manually set the text as centered, but I'm changing the text through jQuery since you can click on the text to make something happen.

.weather-information-paging-left {
    background-color : #fafafa;
    border-bottom-left-radius : 10px;
    cursor : pointer;
    height : 100%;
    margin-left : -30px;
    position : absolute;
    width : 60px;

    user-select : none;
    -moz-user-select : none;
    -khtml-user-select : none;
    -webkit-user-select : none;
    -webkit-user-drag : none;
}

.weather-information-paging-right {
    background-color : #fafafa;
    border-bottom-right-radius : 10px;
    cursor : pointer;
    height : 100%;
    margin-left : 80px;
    position : absolute;
    width : 60px;

    user-select : none;
    -moz-user-select : none;
    -khtml-user-select : none;
    -webkit-user-select : none;
    -webkit-user-drag : none;
}

.weather-information-paging-left-content {
    margin-top : 118px;
    margin-left : -29px;
    width : 120px;

    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    transform: rotate(-90deg);

    -webkit-transform-origin: 50% 50%;
    -moz-transform-origin: 50% 50%;
    -ms-transform-origin: 50% 50%;
    -o-transform-origin: 50% 50%;
    transform-origin: 50% 50%;

    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}

.weather-information-paging-right-content {
    margin-top : 118px;
    margin-left : -29px;
    width : 120px;

    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    transform: rotate(-90deg);

    -webkit-transform-origin: 50% 50%;
    -moz-transform-origin: 50% 50%;
    -ms-transform-origin: 50% 50%;
    -o-transform-origin: 50% 50%;
    transform-origin: 50% 50%;

    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}

jsFiddle

How can I make this vertically text dead center in the DIV?

Upvotes: 3

Views: 140

Answers (2)

Neelesh
Neelesh

Reputation: 116

Try using this css:

.weather-information-paging-right-content {
    margin-top : 118px;
    margin-left : -29px;
    width : 120px;

    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    transform: rotate(-90deg);

    -webkit-transform-origin: 50% 50%;
    -moz-transform-origin: 50% 50%;
    -ms-transform-origin: 50% 50%;
    -o-transform-origin: 50% 50%;
    transform-origin: 50% 50%;

    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

    /* 25% because you have already moved the origin of the div */
    position: absolute;
    top: 25%;
}

Upvotes: 0

Roko C. Buljan
Roko C. Buljan

Reputation: 206669

*{margin:0;}
.test{
    position:absolute;
    background:#ddd;
    width:60px;
    height:100%;
}

.test span{
    position:relative;
    display:inline-block;
    top:50%;           /* Center it vertically */
    left:50%;          /* Center it horizontally */
    height:2.5em;
    margin-top:-1.25em; /* - half height (to perfect center it) */
    width:100px;      
    margin-left:-50px; /* - half width  (to perfect center it) */

    background:#cf5;   /* just to see it */
    transform: rotate(-90deg); /* after it's all centered, apply rotation */
    transform-origin:50% 50%;  /* and rotation origin */
}
<div class="test">
    <span>The sun and the moon</span>
</div>

Upvotes: 2

Related Questions