1

在浏览器窗口中水平居中元素（div，但这不是重点）时出现问题。与其父元素相比，定位它没有问题，但希望它摆脱这个水平 - 但仍然保持它与它的垂直关系。也许我要求太多了？:-) 我可以使用 position:fixed 来做到这一点，但是不管怎样，元素都会在浏览器中的一个位置冻结...

 #parent li {
    display:inline;
    text-align:center;
    float:left;
    position:relative;
    padding: 12px 10px 4px 10px;
    margin-right:10px;
    height:28px;
    border:none;

    }
.child {
    margin:16px 0px 0px 0px;
    float:left;
    z-index: 100;
    position:absolute;
    text-align:left;
    padding:0;
    border:1px solid #BBBBBB;
    border-top:none;
    line-height:14px;
}

我也可以用另一种方式问：这就是我想要的水平：

.child { 
margin:16px 0px 0px 0px; 
float:left; 
z-index: 100;
left: calc(50% - 400px); 
left: -moz-calc(50% - 400px); 
left: -webkit-calc(50% - 400px); 
position:fixed; 
top:inherit; 
text-align:left; 
padding:0; 
border:1px solid #BBBBBB; 
border-top:none; 
line-height:14px;
}

这使它在父母的中间。伟大的。但是 - 当您在页面上向下滚动时，如果孩子可见，它会保持原样，而其余内容会滚动。而且，如果您滚动了一点，因此父级不在其顶部的原始位置，则子级将不会与父级对齐，而是从父级最初所在的顶部出现，像素明智……这不是最佳的…… ：-/

4

1 回答 1

0

为您在 div 中的位置提供一些 (top,bottom) 属性。

#parent li {

position:relative;
top:50px;
left:50px;
}

.child {

position:relative;
top:50px;
left:50px;
}
于 2013-04-04T06:27:51.550 回答