垂直對齊嵌套的div

我一直在尋找解決方案。我嘗試過很多方法，包括table-cell，top：50％，給容器一個固定的高度，並試圖將div 1置於其中...沒有任何工作沒有搞亂2個內部div的大小。垂直對齊嵌套的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; 
}

來源

2015-07-04 Whitedaemon

Jsfiddle this please ... –

一切似乎都很好，我檢查了你的代碼，一切都完美對齊 –

http://jsfiddle.net/56hbevke/這不是你在找什麼？不明白你遇到的問題。你能澄清一下嗎？ – natejd04

#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; 
 
}

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

試試這個。內部的div尺寸被指定爲px，所以使得固定的尺寸不會破壞任何東西。如果您正在尋找+1，並接受。如果沒有，評論。

來源

2015-07-04 06:10:18

你好，對不起，我正在嘗試將徽標垂直居中。它已經水平居中，但是如果格式變得非常奇怪，我無法將它置於頁面中間。感謝您的輸入 – Whitedaemon

使用提供的代碼，它也垂直對齊（請參見全頁面模式中的代碼段），而不僅僅是水平方向。 –

垂直對齊嵌套的div

回答

相關問題