我想让消息框始终与 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;
}
最佳答案
我用 jQuery 解决了它
var toolHeight = $('.tip-message').height();
$('.tip-icon').css('top', (toolHeight/2)-1);
关于jquery - 如何使父 div 的高度缩放到其子项?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30762455/