垂直对齐的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绝对定位和百分比高度

回答

相关问题