Question

我想将垂直文本居中放在DIV中，但我无法弄清楚如何。就像现在一样，我必须使用margin-top并手动将文本设置为居中，但我通过jQuery更改文本，因为您可以单击文本以使某些事情发生。

.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

如何在DIV中将此垂直文本设为死点？

Answer 1

*{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>

Answer 2

尝试使用此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%;
}

垂直居中一个旋转的元素

2 个答案: