Center vertically rotated element
I want to center vertical text in a DIV, but I cannot figure out how to do this. As of now, I have to use margin-top
and manually set the text to be centered, but I am changing the text via 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);
}
How can I make this vertical text dead point in the DIV?
+3
source to share
2 answers
*{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 all centered, apply rotation */
transform-origin:50% 50%; /* and rotation origin */
}
<div class="test">
<span>The sun and the moon</span>
</div>
+2
source to share
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%;
}
0
source to share