Question

我想这样做，即使消息框中添加了更多内容，消息框也将始终垂直居中于X.我尝试将消息和X包装在一个名为tips的div中，并将消息div设置为top：-50％，但这似乎不起作用。这是CSS还是jQuery的东西？我也试过添加溢出：隐藏但没有运气。

CSS

body{
    background: gray;
}

/*    Tips   */
.tooltips{
    width: 600px;
    margin: auto;
}

.tip-icon{
    position: absolute;
    right: 0px;
    height: 40px;
    width: 40px;
}

.tips{
    position: relative;
}

/*    Message    */
.tip-message{
    position: absolute;
    background: #fff;
    padding: 10px 40px;
    top: -50%;
    width: 400px; 
}

.arrow-right {
    position: absolute;
    top: 50%;
    margin-top: -20px;
    right: -50px;
    width: 0; 
    height: 0; 
    border-top: 20px solid transparent;
    border-bottom: 20px solid transparent;

    border-left: 50px solid #fff;
}

https://jsfiddle.net/z7ou07rL/

Answer 1

我用jQuery解决了它

var toolHeight = $('.tip-message').height();

$('.tip-icon').css('top', (toolHeight/2)-1);

https://jsfiddle.net/z7ou07rL/2/

如何让父母对孩子的身高进行评分？

1 个答案: