垂直對齊的div絕對定位和百分比高度

<div id="logo"> 
    <div class="navigation-left menu"></div> 
</div> 

#logo { 
    position: relative; 
    background: #0099ff url("../img/logo.png") no-repeat center center; 
    background-size: auto 55%; 
    height: 18%; 
} 

.navigation-left { 
    background-repeat: no-repeat; 
    background-position: center center; 
    height: 3%; 
    width: auto; 
    position: absolute; 
    padding: 3%; 
    box-sizing: border-box; 
} 

.menu { 
    background-image: url('../img/3lines.png'); 
    background-size: cover; 
}

我試圖垂直居中.navigation-left所以它坐落在的#logo中間。據我所見，我需要在.navigation-left上使用絕對定位，這樣我才能使用auto作爲width屬性。這排除了vertical-align，因爲它將div的display設置爲block。有任何想法嗎？垂直對齊的div絕對定位和百分比高度

來源

2014-04-26 jskidd3

Jsfiddle請因爲我不能看到這個工作沒有**一些**除百分比以外的實際數字。爲什麼你在沒有背景的類上有背景屬性，除了在另一個類中設置的背景？ –

你可以做一個完整的網址jsfiddle的圖像？ – skzryzg

您將'.navigation-left'設置爲'＃logo'的高度的3％，這是容器的18％？如何定義父容器？「左側導航」爲空，並設置爲自動寬度。爲什麼？ – skzryzg

1] Set position:absolute;top:50%;。

2]設置margin-top:-1.5%;或者元素的一半height。

代碼：

.navigation-left { 
    position: absolute; 
    top: 50%; 
    margin-top:-1.5%; /* Should be set to half of the height */ 
    background-repeat: no-repeat; 
    background-position: center center; 
    height: 3%; 
    width: auto; 
    padding: 3%; 
    box-sizing: border-box; 
}

來源

2014-04-26 13:18:10 Mastrianni

如果要在菜單DIV實際內容則負餘量將必須被計算並手動設置（或由JS）。

下面是一個使用CSS3解決方案，它是動態的transforms

JSfiddle Demo（小提琴更新重新％頭，但相關的CSS仍然適用）

HTML

<div id="logo"> 
    <div class="navigation-left menu">Lorem ipsum dolor sit.</div> 
</div>

CSS

* { 
     box-sizing: border-box; 
} 

html, body { 
    height:100%; /* not required but guessed at based on % height in OP */ 
} 

#logo { 
    position: relative; 
    background: gray; 
    height: 100px; /* any value */ 
} 

.navigation-left { 
    position: absolute; 
    top:50%; 
    -webkit-transform:translate(0%, -50%); 
    height:3%; 
    width: auto; 
    padding: 3%; 
    background-color: blue; 

}

來源

2014-04-26 13:25:30

垂直對齊的div絕對定位和百分比高度

回答

相關問題