Question

我一直在寻找解决方案。我尝试了很多方法，包括table-cell，top：50％，给容器一个固定的高度，并试图将div 1置于其中...没有什么工作没有弄乱2个内部div的大小。

我不希望它相对于视口宽度，因为页面的背景将是固定的图像，并且我希望徽标位于图像上的固定位置，但我尝试过的解决方案（前50％等）会导致徽标居中，无论视口大小如何。我在这里猜测我需要在身体上设置一个固定的高度，但我不确定。有什么想法吗？

<body>
<div id="logowrap">
    <div id="outerlogo">
        <div id="innerlogo">LOGOHERE</div>
    </div>
</div>
</body>

CSS：

#logowrap{
    margin: auto;
    display: block;
    width:300px;
}

#outerlogo{
    background-color: rgba(255,255,255,0.9);
    border: 2px solid #656565;
    position: absolute;
    display: table; 
    width: 250px;
    height: 50px;
    padding: 20px;
}

#innerlogo{
    background-color: rgba(255,255,255,1);
    border: 2px solid #656565;
    text-align: center;
    display: table-cell;
    vertical-align: middle;
    padding: 30px;
    font-family: Garamond, Baskerville, "Baskerville Old Face", "Hoefler Text", "Times New Roman", serif;
}

Answer 1

＆＃13;

#logowrap {
    width:300px;
    height:130px;
    position:fixed;
    top:50%;
    left:50%;
    margin-top:-65px;
    margin-left:-150px;
}
#outerlogo {
    background-color: rgba(255, 255, 255, .9);
    border: 2px solid #656565;
    position: absolute;
    display: table;
    width: 250px;
    height: 50px;
    padding: 20px;
}
#innerlogo {
    background-color: rgba(255, 255, 255, 1);
    border: 2px solid #656565;
    text-align: center;
    display: table-cell;
    vertical-align: middle;
    padding: 30px;
    font-family: Garamond, Baskerville, "Baskerville Old Face", "Hoefler Text", "Times New Roman", serif;
}

＆＃13;

<body>
    <div id="logowrap">
        <div id="outerlogo">
            <div id="innerlogo">LOGOHERE</div>
        </div>
    </div>
</body>

＆＃13;

试试这个。内部divs维度使用 px 指定，因此修复 #logowrap 维度并不会破坏任何内容。如果它是您要找的，请+1并接受。如果没有，请评论。

垂直对齐嵌套div

1 个答案: